Checkbox

Usage

import { Checkbox } from 'matterial'

function CheckboxExample() {
  return (
    <Checkbox onClick={() => console.log('I got clicked!')}>Click Me</Checkbox>
  )
}

Example

{
  "isDaddy": true,
  "hasBoat": false
}

import { Checkbox, useForm } from 'matterial'

const FORM = {
  isDaddy: true,
  hasBoat: false,
}

function App() {
  const { form, handleChange } = useForm(FORM)

  return (
    <Form>
      <Checkbox
        name="isDaddy"
        checked={form.data.isDaddy}
        onChange={handleChange}
      >
        I'm a daddy
      </Checkbox>
      <Checkbox
        name="hasBoat"
        checked={form.data.hasBoat}
        onChange={handleChange}
      >
        I have a boat
      </Checkbox>
      <pre>
        <code>{JSON.stringify(form.data, null, 2)}</code>
      </pre>
    </Form>
  )
}

Uncontrolled

To use the Checkbox as an uncontrolled component, omit the checked prop. Optionally, make use of the defaultChecked prop to set the initial value.

<Container row>
  <Checkbox name="foo">Foo</Checkbox>
  <Checkbox name="bar" defaultChecked>Bar</Checkbox>
  <Divider />
  <Checkbox type="radio" name="lorem" value="ipsum">Ipsum</Checkbox>
  <Checkbox type="radio" name="lorem" value="dolor" defaultChecked>Dolor</Checkbox>
</Container>

Radio type

Radio buttons must be wrapped in a RadioGroup component.

<RadioGroup name="radio1" defaultChecked="ipsum">
  <Radio value="lorem">Lorem</Radio>
  <Radio value="ipsum">Ipsum</Radio>
</RadioGroup>

Sizes

Colors

Disabled

Indeterminate

export function CheckboxIndeterminateExample() {
  const [state, setState] = useState(null)

  return (
    <Checkbox
      checked={!!state}
      indeterminate={state === null}
      onChange={(_, checked) => setState(checked)}
    >
      Indeterminate
    </Checkbox>
    <Button
      variant="contained"
      disabled={state === null}
      onClick={() => setState(null)}
    >
      Reset
    </Button>
  )
}