ToggleGroup
ToggleGroup은 여러 Toggle을 하나의 그룹으로 묶어 상태를 함께 관리하는 컴포넌트입니다. 단일 선택과 다중 선택을 지원하며 키보드 내비게이션과 접근성을 제공합니다.주의!
ToggleGroup내부의 각Toggle에는 그룹 내에서 고유한value속성이 필요합니다.
Property
Size
ToggleGroup의 크기를 지정합니다.
Multiple
multiple을 true로 설정하면 여러 개의 Toggle을 동시에 선택할 수 있습니다.
Disabled
ToggleGroup 전체를 비활성화합니다.
Examples
Controlled
value와 onValueChange로 ToggleGroup의 선택 상태를 외부에서 제어할 수 있습니다. 값은 눌린 Toggle의 value 배열로 관리됩니다.
Props Table
ToggleGroup
Toggle 버튼이 눌림 상태를 공유하도록 묶어, 한 번에 하나를 누를 수 있게 하거나 multiple을 사용하면 여러 개를 누를 수 있게 합니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlgxl |
defaultValue? | - | readonly string[] |
onValueChange? | - | function |
value? | - | readonly string[] |
children? | - | ReactNode |
className? | - | stringfunction |
orientation? | horizontal | horizontalvertical |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
loopFocus? | true | boolean |
multiple? | false | boolean |
render? | - | ReactElementfunction |