Checkbox

Checkboxes allow the user to select one or more items from a set.

Import

import { Checkbox } from "pier-ui";

Default Checkbox

<Checkbox />

With Label

Label

Custom Color

<Checkbox color="#8b28db" defaultChecked />

Disabled

Controlled Component

It is recommended to use as a controlled component:

export default function App() {
  const [isChecked, setIsChecked] = useState(false);
  const [testValue, setTestValue] = useState("");
  return (
    <>
      <Checkbox
        onChange={() => {
          setIsChecked(!isChecked);
          setTestValue(isChecked ? "" : "blue");
        }}
        isChecked={isChecked}
        value={testValue}
        label="Check this"
      />
    </>
  );
}

Props

Prop	Description	Type	Default
`label`	label for the checkbox	`string`
`className`	className for the component	`string`
`defaultChecked`	If true, the checkbox will be initially checked.	`boolean`	`false`
`color`	Color of the checkbox	`string`	`theme.colors.grey`
`disabled`		`boolean`	`false`
`required`		`boolean`	`false`

Documentation

Checkbox

Import

Default Checkbox

With Label

Custom Color

Disabled

Controlled Component

Props