체크박스

체크박스 (Checkbox)

옵션을 켜고 끄는 데 사용하는 기본 입력 요소예요. Checkbox 프리미티브의 props를 상속받아요.

출처: 문서

본문

옵션을 켜고 끄는 데 사용하는 기본 입력 요소예요.

<Text as="label" size="2">
  <Flex gap="2">
    <Checkbox defaultChecked />
    Agree to Terms and Conditions
  </Flex>
</Text>

API Reference

이 컴포넌트는 Checkbox 프리미티브의 props를 상속받으며 공통 margin props를 지원해요.

Prop Type Default
size Responsive<"1" | "2" | "3"> "2"
variant "classic" | "surface" | "soft" "surface"
color enum No default value
highContrast boolean No default value

예제 (Examples)

Size

size prop으로 체크박스의 크기를 제어해요.

<Flex align="center" gap="2">
  <Checkbox size="1" defaultChecked />

  <Checkbox size="2" defaultChecked />

  <Checkbox size="3" defaultChecked />
</Flex>

Variant

variant prop으로 체크박스의 시각적 스타일을 제어해요.

<Flex align="center" gap="4">
  <Flex gap="2">
    <Checkbox variant="surface" defaultChecked />

    <Checkbox variant="surface" />
  </Flex>

  <Flex gap="2">
    <Checkbox variant="classic" defaultChecked />

    <Checkbox variant="classic" />
  </Flex>

  <Flex gap="2">
    <Checkbox variant="soft" defaultChecked />

    <Checkbox variant="soft" />
  </Flex>
</Flex>

Color

color prop으로 특정 color를 지정해요.

<Flex gap="2">
  <Checkbox color="indigo" defaultChecked />

  <Checkbox color="cyan" defaultChecked />

  <Checkbox color="orange" defaultChecked />

  <Checkbox color="crimson" defaultChecked />
</Flex>

High-contrast

highContrast prop으로 배경과의 색 대비를 높여요.

<Grid columns="5" display="inline-grid" gap="2">
  <Checkbox color="indigo" defaultChecked />

  <Checkbox color="cyan" defaultChecked />

  <Checkbox color="orange" defaultChecked />

  <Checkbox color="crimson" defaultChecked />

  <Checkbox color="gray" defaultChecked />

  <Checkbox color="indigo" defaultChecked highContrast />

  <Checkbox color="cyan" defaultChecked highContrast />

  <Checkbox color="orange" defaultChecked highContrast />

  <Checkbox color="crimson" defaultChecked highContrast />

  <Checkbox color="gray" defaultChecked highContrast />
</Grid>

Alignment

Checkbox를 Text 안에 구성하면 텍스트의 첫 줄과 자동으로 중앙 정렬돼요.

<Flex direction="column" gap="3">
  <Text as="label" size="2">
    <Flex as="span" gap="2">
      <Checkbox size="1" defaultChecked /> Agree to Terms and Conditions
    </Flex>
  </Text>

  <Text as="label" size="3">
    <Flex as="span" gap="2">
      <Checkbox size="2" defaultChecked /> Agree to Terms and Conditions
    </Flex>
  </Text>

  <Text as="label" size="4">
    <Flex as="span" gap="2">
      <Checkbox size="3" defaultChecked /> Agree to Terms and Conditions
    </Flex>
  </Text>
</Flex>

여러 줄 텍스트와도 자동으로 잘 정렬돼요.

<Box maxWidth="300px">
  <Text as="label" size="3">
    <Flex as="span" gap="2">
      <Checkbox defaultChecked /> I understand that these documents are confidential and cannot be
      shared with a third party.
    </Flex>
  </Text>
</Box>

Disabled

네이티브 disabled 속성을 사용해 비활성화된 체크박스를 만들 수 있어요.

<Flex direction="column" gap="2">
  <Text as="label" size="2">
    <Flex as="span" gap="2">
      <Checkbox />
      Not checked
    </Flex>
  </Text>

  <Text as="label" size="2">
    <Flex as="span" gap="2">
      <Checkbox defaultChecked />
      Checked
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex as="span" gap="2">
      <Checkbox disabled />
      Not checked
    </Flex>
  </Text>

  <Text as="label" size="2" color="gray">
    <Flex as="span" gap="2">
      <Checkbox disabled defaultChecked />
      Checked
    </Flex>
  </Text>
</Flex>

Indeterminate

"indeterminate" 값을 사용해 불확정(indeterminate) 상태의 체크박스를 만들어요.

<Flex gap="2">
  <Checkbox defaultChecked="indeterminate" />

  <Checkbox checked="indeterminate" />
</Flex>

더 알아보기 (Learn more)