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
Checkbox Group
여러 옵션을 동시에 선택할 수 있는 인터랙티브 버튼 세트입니다.
<CheckboxGroup.Root defaultValue={["1"]} name="example">
<CheckboxGroup.Item value="1">Fun</CheckboxGroup.Item>
<CheckboxGroup.Item value="2">Serious</CheckboxGroup.Item>
<CheckboxGroup.Item value="3">Smart</CheckboxGroup.Item>
</CheckboxGroup.Root>
API Reference
이 컴포넌트는 div 요소를 기반으로 하며 common margin props를 지원합니다.
Root
체크박스 그룹의 모든 부분을 포함합니다.
| Prop | Type | Default |
|---|---|---|
asChild | boolean | No default value |
size | Responsive<"1" | "2" | "3"> | "2" |
variant | "classic" | "surface" | "soft" | "surface" |
color | enum | No default value |
highContrast | boolean | No default value |
Item
그룹에서 체크할 수 있는 항목입니다.
Examples
Size
size prop을 사용하여 체크박스의 크기를 제어할 수 있습니다.
<Flex align="center" gap="2">
<CheckboxGroup.Root size="1" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root size="2" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root size="3" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
</Flex>
Variant
variant prop을 사용하여 체크박스의 시각적 스타일을 제어할 수 있습니다.
<Flex gap="2">
<Flex direction="column" asChild gap="2">
<CheckboxGroup.Root variant="surface" defaultValue="1">
<CheckboxGroup.Item value="1" />
<CheckboxGroup.Item value="2" />
</CheckboxGroup.Root>
</Flex>
<Flex direction="column" asChild gap="2">
<CheckboxGroup.Root variant="classic" defaultValue="1">
<CheckboxGroup.Item value="1" />
<CheckboxGroup.Item value="2" />
</CheckboxGroup.Root>
</Flex>
<Flex direction="column" asChild gap="2">
<CheckboxGroup.Root variant="soft" defaultValue="1">
<CheckboxGroup.Item value="1" />
<CheckboxGroup.Item value="2" />
</CheckboxGroup.Root>
</Flex>
</Flex>
Color
color prop을 사용하여 특정 색상을 지정할 수 있습니다.
<Flex gap="2">
<CheckboxGroup.Root color="indigo" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="cyan" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="orange" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="crimson" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
</Flex>
High-contrast
highContrast prop을 사용하여 배경과의 색상 대비를 높일 수 있습니다.
<Grid rows="2" gap="2" display="inline-grid" flow="column">
<CheckboxGroup.Root color="indigo" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="indigo" defaultValue="1" highContrast>
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="cyan" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="cyan" defaultValue="1" highContrast>
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="orange" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="orange" defaultValue="1" highContrast>
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="crimson" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="crimson" defaultValue="1" highContrast>
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="gray" defaultValue="1">
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
<CheckboxGroup.Root color="gray" defaultValue="1" highContrast>
<CheckboxGroup.Item value="1" />
</CheckboxGroup.Root>
</Grid>
Alignment
Text 내에서 CheckboxGroup.Item을 구성하면 첫 번째 텍스트 줄과 자동으로 중앙 정렬됩니다.
<Flex direction="column" gap="3">
<CheckboxGroup.Root size="1" defaultValue="1">
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="2">
<Flex gap="2">
<CheckboxGroup.Item value="2" /> Compact
</Flex>
</Text>
</CheckboxGroup.Root>
<CheckboxGroup.Root size="2" defaultValue="1">
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="3">
<Flex gap="2">
<CheckboxGroup.Item value="2" /> Compact
</Flex>
</Text>
</CheckboxGroup.Root>
<CheckboxGroup.Root size="3" defaultValue="1">
<Text as="label" size="4">
<Flex gap="2">
<CheckboxGroup.Item value="1" /> Default
</Flex>
</Text>
<Text as="label" size="4">
<Flex gap="2">
<CheckboxGroup.Item value="2" /> Compact
</Flex>
</Text>
</CheckboxGroup.Root>
</Flex>
여러 줄의 텍스트와도 자동으로 잘 정렬됩니다.
Disabled
네이티브 disabled 속성을 사용하여 비활성화된 체크박스를 만들 수 있습니다.
<Flex direction="column" gap="2">
<CheckboxGroup.Root defaultValue="2">
<CheckboxGroup.Item value="1">Off</CheckboxGroup.Item>
<CheckboxGroup.Item value="2">On</CheckboxGroup.Item>
</CheckboxGroup.Root>
<CheckboxGroup.Root defaultValue="2">
<CheckboxGroup.Item value="1" disabled>
Off
</CheckboxGroup.Item>
<CheckboxGroup.Item value="2" disabled>
On
</CheckboxGroup.Item>
</CheckboxGroup.Root>
</Flex>
PreviousCheckbox
NextCheckbox Cards