Components
Accordion
Alert Dialog
Aspect Ratio
Avatar
Badge
Bottomsheet
Breadcrumb
Button
Calendar View
Callout
Card
Carousel
Checkbox
Checkbox Group
Checkbox Cards
Combobox
Context Menu
Data List
Dialog
DataGrid
Datepicker
Dropdown Menu
File Upload
Hover Card
Icon Button
Input
Input Card Number
Input Mask
Input Number
InputOTP
Input Phone Number
Input RRN
Inset
Pagination
Popover
Progress
Radio
Radio Group
Radio Cards
Rating
Resizable
Scroll Area
Segmented Control
Select
Separator
Skeleton
Slider
Spinner
Switch
Table
Tabs
Tab Nav
Toast
Text Area
Text Field
Tooltip
TreeView
Components
Segmented Control
서로 다른 값이나 뷰 간 전환을 위한 토글 버튼입니다.
<SegmentedControl.Root defaultValue="inbox">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
API Reference
이 컴포넌트는 토글 그룹 프리미티브에서 props와 기능을 상속받습니다. 공통 여백 속성을 지원합니다.
Root
컨트롤의 항목을 포함합니다.
| Prop | Type | Default |
|---|---|---|
disabled | boolean | false |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "surface" | "classic" | "surface" |
radius | "none" | "small" | "medium" | "large" | "full" | No default value |
Item
컨트롤의 개별 값을 나타냅니다.
Examples
Size
size prop을 사용하여 컨트롤의 크기를 조절합니다.
<Flex align="start" direction="column" gap="4">
<SegmentedControl.Root defaultValue="inbox" size="1">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" size="2">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" size="3">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
Variant
variant prop을 사용하여 컨트롤의 시각적 스타일을 조절합니다.
<Flex align="start" direction="column" gap="4">
<SegmentedControl.Root defaultValue="inbox" variant="surface">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" variant="classic">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
Radius
radius prop을 사용하여 특정 반경 값을 지정합니다.
<Flex align="start" direction="column" gap="4">
<SegmentedControl.Root defaultValue="inbox" radius="none">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" radius="small">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" radius="medium">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" radius="large">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
<SegmentedControl.Root defaultValue="inbox" radius="full">
<SegmentedControl.Item value="inbox">Inbox</SegmentedControl.Item>
<SegmentedControl.Item value="drafts">Drafts</SegmentedControl.Item>
<SegmentedControl.Item value="sent">Sent</SegmentedControl.Item>
</SegmentedControl.Root>
</Flex>
PreviousScroll Area
NextSelect