Checkbox

A checkbox allows a user to select an item, with support for validation and help text.

import {Checkbox} from './Checkbox';

<Checkbox>Remember me</Checkbox>

Selection

Use the isSelected or defaultSelected prop to set the selection state, and onChange to handle selection changes. The isIndeterminate prop overrides the selection state regardless of user interaction.

import {Checkbox} from './Checkbox';
import {useState} from 'react';

function Example(props) {
  let [selected, setSelection] = useState(false);

  return (
    <>
      <Checkbox
        {...props}
        isSelected={selected}
        onChange={setSelection}
      >
        Subscribe
      </Checkbox>
      <p>{`You are ${props.isIndeterminate ? 'partially subscribed' : selected ? 'subscribed' : 'unsubscribed'}`}</p>
    </>
  );
}

Forms

Use the name and value props to submit the checkbox to the server. Set the isRequired prop to validate the user selects the checkbox, or implement custom client or server-side validation. See the Forms guide to learn more.

import {Checkbox} from './Checkbox';
import {Button} from './Button';
import {Form} from './Form';;

<Form>
  <Checkbox
    name="terms"
    value="agree"
    isRequired
    description="By clicking this checkbox, you agree to the terms and conditions.">
    Accept terms and conditions
  </Checkbox>
  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>

API

<CheckboxField>
  <CheckboxButton>Label</CheckboxButton>
  <Text slot="description" />
  <FieldError />
</CheckboxField>

CheckboxField

Default className: react-aria-CheckboxField

CheckboxButton

Default className: react-aria-CheckboxButton