SegmentedControl
같은 콘텐츠 영역 내에서 화면의 보기 방식이나 필터를 제어합니다.주의!
SegmentedControl.Root의defaultValue를 지정하지 않으면 첫 번째 아이템이 자동 선택됩니다.SegmentedControl.Item의value=""속성에는 반드시 아이템의 역할을 설명할 수 있는 이름을 사용하세요.
Property
Size
SegmentedControl의 크기를 설정합니다.
Controlled State
SegmentedControl의 선택 상태를 외부에서 제어합니다.
Disabled
SegmentedControl의 비활성 상태를 설정합니다.
Examples
Icon Item
SegmentedControl.IconItem을 이용하여 아이콘만 포함하는 아이템을 사용할 수 있습니다. 이 경우, 각 아이템에 aria-label로 접근 가능한 이름을 제공하거나, 툴팁으로 보조 설명을 추가하는 것을 권장합니다.
Props Table
SegmentedControl.Root
SegmentedControl.RootPrimitive와 SegmentedControl.IndicatorPrimitive를 하나의 파트로 합칩니다. 인디케이터를 대체하려면 indicatorElement를 사용하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlg |
defaultValue? | - | string |
onValueChange? | - | function |
value? | - | string |
className? | - | stringfunction |
indicatorElement? | - | ReactElement<SegmentedControlIndicatorPrimitive.Props> |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
form? | - | string |
inputRef? | - | React.Ref<HTMLInputElement> |
name? | - | string |
readOnly? | false | boolean |
required? | false | boolean |
render? | - | ReactElementfunction |
SegmentedControl.RootPrimitive
몇 가지 옵션이나 뷰를 전환하는 세그먼트 그룹으로, 한 번에 하나의 세그먼트만 선택됩니다. 자체 슬라이딩 인디케이터는 없으며, 선택 항목을 강조하려면 안에 SegmentedControl.IndicatorPrimitive를 추가하세요. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
size? | md | smmdlg |
defaultValue? | - | string |
onValueChange? | - | function |
value? | - | string |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | false | boolean |
form? | - | string |
inputRef? | - | React.Ref<HTMLInputElement> |
name? | - | string |
readOnly? | false | boolean |
required? | false | boolean |
render? | - | ReactElementfunction |
SegmentedControl.IndicatorPrimitive
선택된 세그먼트로 미끄러지듯 이동하며 그 너비에 맞춰지는 강조 표시. 보조기술에는 숨겨집니다. <div> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
SegmentedControl.Item
텍스트 또는 텍스트와 아이콘으로 레이블을 표시하는, 선택할 수 있는 세그먼트. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | string |
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | - | boolean |
inputRef? | - | React.Ref<HTMLInputElement> |
nativeButton? | true | boolean |
readOnly? | - | boolean |
required? | - | boolean |
render? | - | ReactElementfunction |
SegmentedControl.IconItem
레이블 텍스트 없이 아이콘만 담는 정사각형 세그먼트. <button> 요소로 렌더링됩니다.
| Prop | Default | Type |
|---|---|---|
value | - | string |
children? | - | ReactNode |
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
disabled? | - | boolean |
inputRef? | - | React.Ref<HTMLInputElement> |
nativeButton? | false | boolean |
readOnly? | - | boolean |
required? | - | boolean |
render? | - | ReactElementfunction |