Checkbox

Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected.

import {Checkbox} from '@react-spectrum/s2';

<Checkbox>Unsubscribe</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 '@react-spectrum/s2';
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, Button, Form} from '@react-spectrum/s2';

<Form>
  <Checkbox
    name="terms"
    value="agree"
    isRequired>
    I agree to the terms
  </Checkbox>
  <Button type="submit">Submit</Button>
</Form>

API