Themes
Advanced
Utils
Components

Checkbox Cards

여러 옵션을 동시에 선택할 수 있는 인터랙티브 카드 세트입니다.

View sourceReport an issueView in Playground
<Box maxWidth="600px">

	<CheckboxCards.Root defaultValue={["1"]} columns={{ initial: "1", sm: "3" }}>

		<CheckboxCards.Item value="1">

			<Flex direction="column" width="100%">

				<Text weight="bold">A1 Keyboard</Text>

				<Text>US Layout</Text>

			</Flex>

		</CheckboxCards.Item>

		<CheckboxCards.Item value="2">

			<Flex direction="column" width="100%">

				<Text weight="bold">Pro Mouse</Text>

				<Text>Zero-lag wireless</Text>

			</Flex>

		</CheckboxCards.Item>

		<CheckboxCards.Item value="3">

			<Flex direction="column" width="100%">

				<Text weight="bold">Lightning Mat</Text>

				<Text>Wireless charging</Text>

			</Flex>

		</CheckboxCards.Item>

	</CheckboxCards.Root>

</Box>

API Reference

이 컴포넌트는 div 요소를 기반으로 하며 common margin props를 지원합니다.

Root

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
variant
"surface" | "classic"
"surface"
color
enum
No default value
highContrast
boolean
No default value
columns
Responsive<enum | string>
"repeat(auto-fit, minmax(200px, 1fr))"
gap
Responsive<enum | string>
"4"

Item

그룹에서 체크할 수 있는 항목입니다.

Examples

Size

size prop을 사용하여 크기를 제어할 수 있습니다.

<Flex align="center" gap="3">

	<CheckboxCards.Root defaultValue={["1"]} size="1">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} size="2">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} size="3">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>

</Flex>

Variant

variant prop을 사용하여 시각적 스타일을 제어할 수 있습니다.

<Flex direction="column" gap="3" maxWidth="200px">

	<CheckboxCards.Root defaultValue={["1"]} variant="surface">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} variant="classic">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>

</Flex>

Color

color prop을 사용하여 특정 색상을 지정할 수 있습니다.

<Flex direction="column" gap="3" maxWidth="200px">

	<CheckboxCards.Root defaultValue={["1"]} color="indigo">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="cyan">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="orange">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="crimson">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>

</Flex>

High-contrast

highContrast prop을 사용하여 배경과의 색상 대비를 높일 수 있습니다.

<Grid columns="2" gap="3" display="inline-grid">

	<CheckboxCards.Root defaultValue={["1"]} color="indigo">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="indigo" highContrast>

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="cyan">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="cyan" highContrast>

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="orange">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="orange" highContrast>

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="crimson">

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root defaultValue={["1"]} color="crimson" highContrast>

		<CheckboxCards.Item value="1">Agree to Terms</CheckboxCards.Item>

	</CheckboxCards.Root>

</Grid>

Disabled

<Flex direction="column" gap="4" maxWidth="450px">

	<CheckboxCards.Root columns="2" defaultValue="2">

		<CheckboxCards.Item value="1">Off</CheckboxCards.Item>

		<CheckboxCards.Item value="2">On</CheckboxCards.Item>

	</CheckboxCards.Root>



	<CheckboxCards.Root columns="2" defaultValue="2">

		<CheckboxCards.Item value="1" disabled>

			Off

		</CheckboxCards.Item>

		<CheckboxCards.Item value="2" disabled>

			On

		</CheckboxCards.Item>

	</CheckboxCards.Root>

</Flex>
PreviousCheckbox Group
NextCombobox
Edit this page on GitHub.