Checkbox

import

import { Checkbox, CheckboxGroup, CheckboxProps } from '@bone-ui/checkbox'

Basic

Loading...

<Checkbox>Checkbox</Checkbox>

<Checkbox>Checkbox</Checkbox>

LIVE DEMO

Color Scheme

Loading...

<Box toCenterY spaceX3> <Checkbox colorScheme="orange500" defaultChecked> Orange500 </Checkbox> <Checkbox colorScheme="red500" defaultChecked> Red500 </Checkbox> <Checkbox colorScheme="blue500" defaultChecked> Blue500 </Checkbox> </Box>

<Box toCenterY spaceX3>
  <Checkbox colorScheme="orange500" defaultChecked>
    Orange500
  </Checkbox>
  <Checkbox colorScheme="red500" defaultChecked>
    Red500
  </Checkbox>
  <Checkbox colorScheme="blue500" defaultChecked>
    Blue500
  </Checkbox>
</Box>

LIVE DEMO

Checkbox Group

Loading...

function GroupDemo() { const [value, setValue] = useState(['green']) return ( <CheckboxGroup value={value} onChange={(e) => { setValue(e) }} > <Checkbox value="red">Red</Checkbox> <Checkbox value="green">Green</Checkbox> <Checkbox value="blue">Blue</Checkbox> </CheckboxGroup> ) }

function GroupDemo() {
  const [value, setValue] = useState(['green'])
  return (
    <CheckboxGroup
      value={value}
      onChange={(e) => {
        setValue(e)
      }}
    >
      <Checkbox value="red">Red</Checkbox>
      <Checkbox value="green">Green</Checkbox>
      <Checkbox value="blue">Blue</Checkbox>
    </CheckboxGroup>
  )
}

LIVE DEMO

Use options

Loading...

function Demo() { const options = [ { label: 'A', value: 'A' }, { label: 'B', value: 'B', disabled: true }, { label: 'C', value: 'C' }, ] return <CheckboxGroup options={options}></CheckboxGroup> }

function Demo() {
  const options = [
    { label: 'A', value: 'A' },
    { label: 'B', value: 'B', disabled: true },
    { label: 'C', value: 'C' },
  ]
  return <CheckboxGroup options={options}></CheckboxGroup>
}

LIVE DEMO

Customize Checkbox Render

Loading...

<Checkbox render={({ checked }) => ( <Box toCenter circle-48 bg={checked ? 'gray200' : false}> <Box circle-32 bgRed100></Box> </Box> )} />

<Checkbox
  render={({ checked }) => (
    <Box toCenter circle-48 bg={checked ? 'gray200' : false}>
      <Box circle-32 bgRed100></Box>
    </Box>
  )}
/>

LIVE DEMO

Customize CheckboxGroup renderItem

Loading...

function Demo() { const ColorCheckbox = (props) => ( <Checkbox {...props} render={({ checked }) => ( <Box toCenter circle-48 bg={checked ? 'gray200' : false}> <Box bg={props.value} circle-32></Box> </Box> )} /> ) return ( <CheckboxGroup defaultValue={['green300']}> <ColorCheckbox value="red300"></ColorCheckbox> <ColorCheckbox value="green300"></ColorCheckbox> <ColorCheckbox value="blue300"></ColorCheckbox> <ColorCheckbox value="orange300"></ColorCheckbox> <ColorCheckbox value="purple300"></ColorCheckbox> </CheckboxGroup> ) }

function Demo() {
  const ColorCheckbox = (props) => (
    <Checkbox
      {...props}
      render={({ checked }) => (
        <Box toCenter circle-48 bg={checked ? 'gray200' : false}>
          <Box bg={props.value} circle-32></Box>
        </Box>
      )}
    />
  )

  return (
    <CheckboxGroup defaultValue={['green300']}>
      <ColorCheckbox value="red300"></ColorCheckbox>
      <ColorCheckbox value="green300"></ColorCheckbox>
      <ColorCheckbox value="blue300"></ColorCheckbox>
      <ColorCheckbox value="orange300"></ColorCheckbox>
      <ColorCheckbox value="purple300"></ColorCheckbox>
    </CheckboxGroup>
  )
}

LIVE DEMO