ui
Radio Group
Nhóm lựa chọn một giá trị với API đồng nhất cùng `label`, `error` và kích thước theo form token.
1. Import
Import radio group từ design system.
import { RadioGroup, RadioGroupItem } from "@/design-system/components/ui/radio-group"2. Group Props
Props dành cho `RadioGroup`.
| Prop | Type | Default |
|---|---|---|
| label | ReactNode | -- |
| required | boolean | false |
| error | string | -- |
| wrapperClassName | string | -- |
| labelClassName | string | -- |
| errorClassName | string | -- |
| value | string | -- |
| defaultValue | string | -- |
| onValueChange | (value: string) => void | -- |
3. Item Props
Props dành cho `RadioGroupItem`.
| Prop | Type | Default |
|---|---|---|
| label | ReactNode | -- |
| size | "xxs" | "xs" | "sm" | "md" | "lg" | "xl" | "xxl" | "md" |
| labelClassName | string | -- |
| containerClassName | string | -- |
| className | string | -- |
4. Sizes
Available sizes for the RadioGroupItem components.
RadioGroupItem Sizes
5. Usages
Các mẫu dùng phổ biến.
import { RadioGroup, RadioGroupItem } from "@/design-system/components/ui/radio-group";
export function Example() {
return (
<RadioGroup label="Mật độ hiển thị" defaultValue="comfortable" className="w-fit">
<RadioGroupItem id="density-default" value="default" label="Mặc định" />
<RadioGroupItem id="density-comfortable" value="comfortable" label="Thoải mái" />
<RadioGroupItem id="density-compact" value="compact" label="Thu gọn" />
</RadioGroup>
);
}