체크박스 카드

체크박스 카드 (Checkbox Cards)

한 번에 여러 옵션을 선택할 수 있는 상호작용 카드의 집합이에요. div 요소 기반으로 만들어졌어요.

출처: 문서

본문

한 번에 여러 옵션을 선택할 수 있는 상호작용 카드의 집합이에요.

<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 요소를 기반으로 하며 공통 margin props를 지원해요.

Root

Prop Type Default
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으로 특정 color를 지정해요.

<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>

더 알아보기 (Learn more)