CheckButton

Usage

import { CheckButton, CheckButtonGroup } from 'matterial'
import { useState } from 'react'

function App() {
  const [checked, setChecked] = useState('foo')

  return (
    <CheckButtonGroup>
      <CheckButton
        name="foo"
        value="bar"
        checked={checked === 'foo'}
        onChange={() => setChecked('foo')}
      >
        Foo
      </CheckButton>
      <CheckButton
        name="bar"
        value="baz"
        checked={checked === 'bar'}
        onChange={() => setChecked('bar')}
      >
        Bar
      </CheckButton>
    </CheckButtonGroup>
  )
}

Checkbox-Like Example

Radio-Like Example

Uncontrolled Example

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

CheckButtonGroup Props

as

as = string | Component

orientation

orientation = 'horizontal' | 'vertical'