Checkbox

Read Only
Container Props
Label
Inline
Indeterminate
API

Use checked property to check or not the checkbox.

To set a callback function when the value of the checkbox is changed, use onChange property. See the following example:

import {ClayCheckbox} from '@clayui/form';

import {ClayCheckbox} from '@clayui/form';

const Component = () => {
  const [value, setValue] = useState(false);

  return (
    <ClayCheckbox checked={value} onChange={() => setValue(val => !val)} />
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(false);
  return (
    <ClayCheckbox checked={value} onChange={() => setValue(val => !val)} />
  );
};
render(<Component />);

Here you can see some options or ideas on how to extend our Checkbox component to fit your use:

Read Only

If you want a checkbox without actions on change(or just not use onChange property), use readOnly property.

import {ClayCheckbox} from '@clayui/form';

import {ClayCheckbox} from '@clayui/form';

const Component = () => {
  return (
    <ClayCheckbox aria-label="hello! Can you see me?" checked={true} readOnly />
  );
};

render(<Component />);

const Component = () => {
  return (
    <ClayCheckbox aria-label="hello! Can you see me?" checked={true} readOnly />
  );
};
render(<Component />);

Container Props

If you want to modify the container that wraps the checkbox, use containerProps:

import {ClayCheckbox} from '@clayui/form';

import {ClayCheckbox} from '@clayui/form';

const Component = () => {
  const [value, setValue] = useState(false);

  const data = {
    id: "test"
  };

  return (
    <ClayCheckbox
      aria-label="I'm checked indefinitely"
      checked={true}
      containerProps={data}
      onChange={() => setValue(val => !val)}
    />
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(false);
  const data = {
    id: "test"
  };
  return (
    <ClayCheckbox
      aria-label="I'm checked indefinitely"
      checked={true}
      containerProps={data}
      onChange={() => setValue(val => !val)}
    />
  );
};
render(<Component />);

Label

Use label property to describe what the checkbox is for.

Option 1

import {ClayCheckbox} from '@clayui/form';

import {ClayCheckbox} from '@clayui/form';

const Component = () => {
  const [value, setValue] = useState(false);

  return (
    <ClayCheckbox
      aria-label="Option 1"
      checked={value}
      onChange={() => setValue(val => !val)}
      label="Option 1"
    />
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(false);
  return (
    <ClayCheckbox
      aria-label="Option 1"
      checked={value}
      onChange={() => setValue(val => !val)}
      label="Option 1"
    />
  );
};
render(<Component />);

Inline

Group checkboxes on the same horizontal row by using inline property.

Option 1

Option 2

Option 3

import {ClayCheckbox} from '@clayui/form';

import {ClayCheckbox} from '@clayui/form';

const Component = () => {
  const [value, setValue] = useState(false);

  return (
    <>
      <ClayCheckbox
        aria-label="Option 1"
        checked={value}
        onChange={() => setValue(val => !val)}
        label="Option 1"
        inline
      />
      <ClayCheckbox
        aria-label="Option 2"
        checked={value}
        onChange={() => setValue(val => !val)}
        label="Option 2"
        inline
      />
      <ClayCheckbox
        aria-label="Option 3"
        checked={value}
        onChange={() => setValue(val => !val)}
        label="Option 3"
        inline
      />
    </>
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(false);
  return (
    <>
      <ClayCheckbox
        aria-label="Option 1"
        checked={value}
        onChange={() => setValue(val => !val)}
        label="Option 1"
        inline
      />
      <ClayCheckbox
        aria-label="Option 2"
        checked={value}
        onChange={() => setValue(val => !val)}
        label="Option 2"
        inline
      />
      <ClayCheckbox
        aria-label="Option 3"
        checked={value}
        onChange={() => setValue(val => !val)}
        label="Option 3"
        inline
      />
    </>
  );
};
render(<Component />);

Indeterminate

Use indeterminate property for making the checkbox indeterminate.

import {ClayCheckbox} from '@clayui/form';

import {ClayCheckbox} from '@clayui/form';

const Component = () => {
  const [value, setValue] = useState(false);

  return (
    <ClayCheckbox
      aria-label="I'm indeterminate"
      checked={value}
      onChange={() => setValue(val => !val)}
      indeterminate
    />
  );
};

render(<Component />);

const Component = () => {
  const [value, setValue] = useState(false);
  return (
    <ClayCheckbox
      aria-label="I'm indeterminate"
      checked={value}
      onChange={() => setValue(val => !val)}
      indeterminate
    />
  );
};
render(<Component />);

API

Property	Type	Required	Default	Description
checked	boolean	true		Flag to indicate if input is checked or not.
containerProps	React.HTMLAttributes<HTMLDivElement>	false	{}	Props to add to the outer most container.
indeterminate	boolean	false	false	Flag to indicate that checkbox is in an indeterminate state.
inline	boolean	false		Flag to display element `inline`.
label	React.ReactText	false		Text describes what the checkbox is for.
onChange	(e: React.ChangeEvent<HTMLInputElement>) => void	true		Callback for when checkbox value is changed

Read Only

Container Props

Label

Inline

Indeterminate

API

Default

Checkboxes

Radios

Inline

Checkbox

Radio

Disabled

Without labels

Custom

Checkboxes

Radios