Radio groupstandard
여러 선택지 중 하나만 고르는 라디오 그룹(radio group)입니다. shadcn base-nova 의 stock 아이템이며 Base UI `RadioGroup`·`Radio` 위에 서 있습니다. 라벨과 설명을 함께 묶을 때는 `field` 아이템과 같이 씁니다.
설치
pnpm
pnpm dlx shadcn@4.23.0 add @uikit/radio-groupDefault
radio-group-example.tsx
import { Example, ExampleWrapper,} from "@/components/example"import { Field, FieldContent, FieldDescription, FieldLabel, FieldLegend, FieldSet,} from "@/components/ui/field"import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
export default function RadioGroupExample() { return ( <ExampleWrapper> <RadioGroupBasic /> <RadioGroupWithDescriptions /> <RadioGroupWithFieldSet /> <RadioGroupGrid /> <RadioGroupDisabled /> <RadioGroupInvalid /> </ExampleWrapper> )}
function RadioGroupBasic() { return ( <Example title="Basic"> <RadioGroup defaultValue="comfortable"> <Field orientation="horizontal"> <RadioGroupItem value="default" id="r1" /> <FieldLabel htmlFor="r1" className="font-normal"> Default </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="comfortable" id="r2" /> <FieldLabel htmlFor="r2" className="font-normal"> Comfortable </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="compact" id="r3" /> <FieldLabel htmlFor="r3" className="font-normal"> Compact </FieldLabel> </Field> </RadioGroup> </Example> )}
function RadioGroupWithDescriptions() { return ( <Example title="With Descriptions"> <RadioGroup defaultValue="plus"> <FieldLabel htmlFor="plus-plan"> <Field orientation="horizontal"> <FieldContent> <div className="font-medium">Plus</div> <FieldDescription> For individuals and small teams </FieldDescription> </FieldContent> <RadioGroupItem value="plus" id="plus-plan" /> </Field> </FieldLabel> <FieldLabel htmlFor="pro-plan"> <Field orientation="horizontal"> <FieldContent> <div className="font-medium">Pro</div> <FieldDescription>For growing businesses</FieldDescription> </FieldContent> <RadioGroupItem value="pro" id="pro-plan" /> </Field> </FieldLabel> <FieldLabel htmlFor="enterprise-plan"> <Field orientation="horizontal"> <FieldContent> <div className="font-medium">Enterprise</div> <FieldDescription> For large teams and enterprises </FieldDescription> </FieldContent> <RadioGroupItem value="enterprise" id="enterprise-plan" /> </Field> </FieldLabel> </RadioGroup> </Example> )}
function RadioGroupWithFieldSet() { return ( <Example title="With FieldSet"> <FieldSet> <FieldLegend>Battery Level</FieldLegend> <FieldDescription> Choose your preferred battery level. </FieldDescription> <RadioGroup defaultValue="medium"> <Field orientation="horizontal"> <RadioGroupItem value="high" id="battery-high" /> <FieldLabel htmlFor="battery-high" className="font-normal"> High </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="medium" id="battery-medium" /> <FieldLabel htmlFor="battery-medium" className="font-normal"> Medium </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="low" id="battery-low" /> <FieldLabel htmlFor="battery-low" className="font-normal"> Low </FieldLabel> </Field> </RadioGroup> </FieldSet> </Example> )}
function RadioGroupGrid() { return ( <Example title="Grid Layout"> <RadioGroup defaultValue="medium" className="grid grid-cols-2 gap-2"> <FieldLabel htmlFor="size-small"> <Field orientation="horizontal"> <RadioGroupItem value="small" id="size-small" /> <div className="font-medium">Small</div> </Field> </FieldLabel> <FieldLabel htmlFor="size-medium"> <Field orientation="horizontal"> <RadioGroupItem value="medium" id="size-medium" /> <div className="font-medium">Medium</div> </Field> </FieldLabel> <FieldLabel htmlFor="size-large"> <Field orientation="horizontal"> <RadioGroupItem value="large" id="size-large" /> <div className="font-medium">Large</div> </Field> </FieldLabel> <FieldLabel htmlFor="size-xlarge"> <Field orientation="horizontal"> <RadioGroupItem value="xlarge" id="size-xlarge" /> <div className="font-medium">X-Large</div> </Field> </FieldLabel> </RadioGroup> </Example> )}
function RadioGroupDisabled() { return ( <Example title="Disabled"> <RadioGroup defaultValue="option2" disabled> <Field orientation="horizontal"> <RadioGroupItem value="option1" id="disabled-1" /> <FieldLabel htmlFor="disabled-1" className="font-normal"> Option 1 </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="option2" id="disabled-2" /> <FieldLabel htmlFor="disabled-2" className="font-normal"> Option 2 </FieldLabel> </Field> <Field orientation="horizontal"> <RadioGroupItem value="option3" id="disabled-3" /> <FieldLabel htmlFor="disabled-3" className="font-normal"> Option 3 </FieldLabel> </Field> </RadioGroup> </Example> )}
function RadioGroupInvalid() { return ( <Example title="Invalid"> <FieldSet> <FieldLegend>Notification Preferences</FieldLegend> <FieldDescription> Choose how you want to receive notifications. </FieldDescription> <RadioGroup defaultValue="email"> <Field orientation="horizontal" data-invalid> <RadioGroupItem value="email" id="invalid-email" aria-invalid /> <FieldLabel htmlFor="invalid-email" className="font-normal"> Email only </FieldLabel> </Field> <Field orientation="horizontal" data-invalid> <RadioGroupItem value="sms" id="invalid-sms" aria-invalid /> <FieldLabel htmlFor="invalid-sms" className="font-normal"> SMS only </FieldLabel> </Field> <Field orientation="horizontal" data-invalid> <RadioGroupItem value="both" id="invalid-both" aria-invalid /> <FieldLabel htmlFor="invalid-both" className="font-normal"> Both Email & SMS </FieldLabel> </Field> </RadioGroup> </FieldSet> </Example> )}