Ellie UI

Checkbox

Usage

  import { Checkbox } from "@ellie-ui/core";

  export const Example = () => {
    return (
      <Checkbox defaultChecked />
    )
  }

With Label

  import { Checkbox } from "@ellie-ui/core";

  export const Example = () => {
    return (
      <Checkbox defaultChecked>
        <Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
      </Checkbox>
    )
  }

Sizes

  import { Checkbox } from "@ellie-ui/core";

  export const Example = () => {
    return (
      <div className="flex flex-col items-center gap-3">
        <Checkbox size="small" defaultChecked>
          <Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
        </Checkbox>
        <Checkbox size="medium" defaultChecked>
          <Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
        </Checkbox>
        <Checkbox size="large" defaultChecked>
          <Checkbox.Label>서비스 약관에 동의합니다.</Checkbox.Label>
        </Checkbox>
      </div>
    )
  }

Disabled

  import { Checkbox } from "@ellie-ui/core";

  export const Example = () => {
    return (
      <Checkbox defaultChecked disabled />
    )
  }

Invalid

  import { Checkbox } from "@ellie-ui/core";

  export const Example = () => {
    return (
      <Checkbox defaultChecked invalid />
    )
  }

Indeterminate

  import { Checkbox } from "@ellie-ui/core";

  export const Example = () => {
    return (
      <Checkbox checked="indeterminate" />
    )
  }

Controlled

  import { Checkbox } from "@ellie-ui/core";
  import { useCheckbox } from "@ellie-ui/core/hooks";

  export const Example = () => {
    const checkbox = useCheckbox()

    return (
      <Checkbox
        checked={checkbox.checked}
        onCheckedChange={checkbox.onCheckedChange}
      />
    )
  }

API

Checkbox Props

Prop

Type