라디오 버튼

라디오 버튼은 사용자가 여러 개의 옵션 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

선택지가 2~7개로 한정되고 모든 항목을 한눈에 보여 줘야 할 때 사용하며, 같은 name으로 그룹을 묶어 화살표 키 이동과 fieldset/legend 패턴으로 접근성을 보장합니다.

examples/radio-group/RadioDefault.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioDefault() {

부가적인 설명이 들어갑니다.

examples/radio-group/RadioWithDescription.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioWithDescription() {

examples/radio-group/RadioSize.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioSize() {

examples/radio-group/RadioDisabled.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioDisabled() {

examples/radio-group/RadioCheckedDisabled.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioCheckedDisabled() {

examples/radio-group/RadioGroupExample.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioGroupExample() {

부가적인 설명이 들어갑니다.

examples/radio-group/RadioGroupColumn.tsx

import { Radio, RadioGroup } from "@/components/ui/dynamic/radio-group"

export default function RadioGroupColumn() {

부가적인 설명이 들어갑니다.

examples/radio-group/RadioGroupColumnControlled.tsx

"use client"

import { useState } from "react"

examples/radio-group/RadioSortDefault.tsx

import { RadioGroup, RadioSort } from "@/components/ui/dynamic/radio-group"

export default function RadioSortDefault() {

이름	타입	기본값	설명
aria-label	string	—	Defines a string value that labels the current element. @see aria-labelledby.
className	string	—	—
defaultChecked	boolean	—	—
description	string	—	—
disabled	boolean	—	—
id	string	—	—
onClick	MouseEventHandler<HTMLInputElement>	—	—
size	enum	medium	—
style	CSSProperties	—	—
tabIndex	number	—	—
type	HTMLInputTypeAttribute	—	—

사용 지침