Checkbox.mdx

import {Layout} from '../../src/Layout'; export default Layout;

import docs from 'docs:react-aria-components'; import {Checkbox as VanillaCheckbox} from 'vanilla-starter/Checkbox'; import {Checkbox as TailwindCheckbox} from 'tailwind-starter/Checkbox'; import '../../tailwind/tailwind.css'; import Anatomy from '@react-aria/checkbox/docs/checkbox-anatomy.svg';

export const tags = ['input'];

Checkbox

{docs.exports.Checkbox.description}

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.

"use client";
import {Checkbox} from 'vanilla-starter/Checkbox';
import {useState} from 'react';

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

  return (
    <>
      <Checkbox 
        {...props}
        ///- begin highlight -///
        isSelected={selected}
        onChange={setSelection}
        /* PROPS */
        ///- end highlight -///
      >
        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.

"use client";
import {Checkbox} from 'vanilla-starter/Checkbox';
import {Button} from 'vanilla-starter/Button';
import {Form} from 'react-aria-components';

<Form>
  <Checkbox
    ///- begin highlight -///
    name="terms"
    value="agree"
    isRequired>
    {/*- end highlight -*/}
    I agree to the terms
  </Checkbox>
  <Button type="submit" style={{marginTop: 8}}>Submit</Button>
</Form>

API

<Checkbox>Label</Checkbox>

Checkbox