Checkbox

Checkbox components are used in forms when the user needs to select multiple values from multiple options.

Preview
Code

Label

Installation

npm
yarn
pnpm
bun

npm i @melio-ui/checkbox

If @melio-ui/react is already installed globally, you can skip this step.

Import

Individual
Global

import { 
  CheckboxRoot,
  CheckboxIndicator,
  CheckboxIcon,
  CheckboxLabel,
  CheckboxGroup,
} from '@melio-ui/checkbox';

CheckboxRoot: All parts of the checkbox are included.
CheckboxIndicator: Rendered when the checkbox is checked or indeterminate. Style it directly, use it as an icon wrapper, or both.
CheckboxIcon: Displays check, uncheck, and indeterminate status.
CheckboxLabel: Display text.
CheckboxGroup: Group checkboxes.

Another way to import

'use client';

import { Checkbox } from '@melio-ui/checkbox';

<Checkbox.Root>
  <Checkbox.Indicator>
    <Checkbox.Icon />
  </Checkbox.Indicator>
  <Checkbox.Label>체크박스</Checkbox.Label>
</Checkbox.Root>;

'use client' must be used when rendering on the server side.

API Reference

CheckboxRoot

All parts of the checkbox are included.

Prop	Type	Default	Description
checked	`boolean`	-	Set whether to check or not.
defaultChecked	`boolean`	-	The checked state of the checkbox when it is first rendered. Use this when there is no need to control the checked state.
indeterminate	`boolean`	-	This refers to a state indicating partial selection, meaning that some, but not all, of the related checkboxes are selected.
disabled	`boolean`	-	Determines whether the checkbox is inactive.
inputProps	`React. InputHTMLAttributes <HTMLInputElement>`	-	Attributes assigned to the input element.
onCheckedChange	`(checked: boolean) => void`	-	This is an event handler that is triggered when the state of the checkbox changes.

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"
[data-disabled]	Visible when disabled
[data-readonly]	Visible when read-only

CheckboxIndicator

Rendered when the checkbox is checked or indeterminate. Style it directly, use it as an icon wrapper, or both.

Prop	Type	Default	Description
children*	`React.ReactNode \| (checked: boolean, indeterminate?: boolean) => React.ReactNode`	-	Elements rendered when a checkbox is checked or indeterminate.

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"

CheckboxIcon

Displays check, uncheck, and indeterminate status.

Prop	Type	Default	Description
checkedIcon	`React.ReactNode`	-	Icon that indicates the checked status.
uncheckedIcon	`React.ReactNode`	-	Icon that indicates the unchecked status.
indeterminateIcon	`React.ReactNode`	-	Icon that indicates the indeterminate status.

CheckboxLabel

Display text.

Data attribute	Values
[data-state]	"checked" \| "unchecked" \| "indeterminate"

CheckboxGroup

Group checkboxes.

Prop	Type	Default	Description
orientation	`TypeAttributes.Orientation "horizontal" \| "vertical"`	-	Direction for the placement of the Checkbox component.
onValueChange	`(value: CheckboxValue[]) => void CheckboxValue: string \| number \| undefined`	-	This is an event handler that is triggered when the state of a checkbox group changes.

Data attribute	Values
[data-orientation]	"horizontal" \| "vertical"

Examples

defaultChecked

<CheckboxRoot defaultChecked>
  <CheckboxIndicator>
    <CheckboxIcon />
  </CheckboxIndicator>
  <CheckboxLabel>defaultChecked</CheckboxLabel>
</CheckboxRoot>

disabled

<CheckboxRoot disabled>
  <CheckboxIndicator>
    <CheckboxIcon />
  </CheckboxIndicator>
  <CheckboxLabel>disabled</CheckboxLabel>
</CheckboxRoot>

indeterminate

<CheckboxRoot indeterminate>
  <CheckboxIndicator>
    <CheckboxIcon />
  </CheckboxIndicator>
  <CheckboxLabel>indeterminate</CheckboxLabel>
</CheckboxRoot>

Indicator children function

function IndicatorFunc() {
  return (
    <CheckboxRoot>
      <CheckboxIndicator>
        {(checked: boolean) => {
          if (checked) return <CheckedUserIcon />;
          return <UncheckedUserIcon />;
        }}
      </CheckboxIndicator>
      <CheckboxLabel>User</CheckboxLabel>
    </CheckboxRoot>
  );
}

render(<IndicatorFunc />);

function CheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#00A8FF"
      />
    </svg>
  );
}

function UncheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#cacdcf"
      />
    </svg>
  );
}

Checked/Unchecked Icon

function CustomCheckboxIcon() {
  return (
    <CheckboxRoot>
      <CheckboxIndicator>
        <CheckboxIcon checkedIcon={<CheckedUserIcon />} uncheckedIcon={<UncheckedUserIcon />} />
      </CheckboxIndicator>
      <CheckboxLabel>User</CheckboxLabel>
    </CheckboxRoot>
  );
}

render(<CustomCheckboxIcon />);

function CheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#00A8FF"
      />
    </svg>
  );
}

function UncheckedUserIcon() {
  return (
    <svg
      width="2em"
      height="2em"
      viewBox="0 0 24 24"
      fill="currentColor"
      xmlns="http://www.w3.org/2000/svg"
    >
      <path
        d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"
        fill="#cacdcf"
      />
    </svg>
  );
}

Breadcrumb

CircularProgress