Segmented Control
이 문서는 정리 중이에요. 문의 내용은 #_design_core 채널을 찾아주세요.
Installation
Props
SegmentedControl
value와 defaultValue 중 적어도 하나를 제공해야 해요.
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
onValueChange? | ((value: string) => void) | - |
defaultValue? | string | - |
value? | string | - |
form? | string | - |
name? | string | - |
disabled? | boolean | - |
SegmentedControlItem
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | false |
invalid? | boolean | - |
disabled? | boolean | - |
value? | string | - |
children? | string | - |
rootRef? | Ref<HTMLLabelElement> | - |
inputProps? | InputHTMLAttributes<HTMLInputElement> | - |
Examples
Disabled
Long Label
Pill 형태의 SegmentedControlItem 한 개는 86px의 최소 너비를 가져요. 제공한 옵션 중 이 너비를 초과하는 옵션이 있다면, 가장 긴 옵션의 너비에 모든 옵션의 너비가 맞춰져요.
Fixed Width
SegmentedControl의 style prop에 width를 제공해서 직접 너비를 설정할 수 있어요.
지정한 너비가 무시되는 경우
직접 설정한 너비 안에서 모든 레이블을 overflow 없이 표시할 수 없는 경우, 직접 지정한 너비 대신 overflow 없이 표시할 수 있는 최소 너비로 자동 조정돼요.