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
Combines SegmentedControl.RootPrimitive and SegmentedControl.IndicatorPrimitive into a single part. Use indicatorElement to replace the indicator. Renders a <div> element.
| 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
Group of segments for switching between a few options or views, where only one segment is selected at a time. Has no sliding indicator of its own; add SegmentedControl.IndicatorPrimitive inside it to highlight the selection. Renders a <div> element.
| 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
Highlight that slides to the selected segment and matches its width. Hidden from assistive technologies. Renders a <div> element.
| Prop | Default | Type |
|---|---|---|
className? | - | stringfunction |
style? | - | React.CSSPropertiesfunction |
render? | - | ReactElementfunction |
SegmentedControl.Item
Selectable segment of a segmented control, labeled with text or with text and an icon. Renders a <button> element.
| 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
Square segment of a segmented control that holds only an icon, with no label text. Renders a <button> element.
| 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 |