Radio

import

import { Radio, RadioGroup } from '@bone-ui/radio'

Basic

Loading...

<Radio>Radio</Radio>

<Radio>Radio</Radio>

LIVE DEMO

Color Scheme

Loading...

<Box toCenterY spaceX3> <Radio colorScheme="red500" defaultChecked> Red500 </Radio> <Radio colorScheme="blue500" defaultChecked> Blue500 </Radio> <Radio colorScheme="cyan500" defaultChecked> cyan500 </Radio> </Box>

<Box toCenterY spaceX3>
  <Radio colorScheme="red500" defaultChecked>
    Red500
  </Radio>
  <Radio colorScheme="blue500" defaultChecked>
    Blue500
  </Radio>
  <Radio colorScheme="cyan500" defaultChecked>
    cyan500
  </Radio>
</Box>

LIVE DEMO

Radio Group

Loading...

<RadioGroup defaultValue="green"> <Radio value="red">Red</Radio> <Radio value="green">Green</Radio> <Radio value="blue">Blue</Radio> </RadioGroup>

<RadioGroup defaultValue="green">
  <Radio value="red">Red</Radio>
  <Radio value="green">Green</Radio>
  <Radio value="blue">Blue</Radio>
</RadioGroup>

LIVE DEMO

Use options

Loading...

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

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

LIVE DEMO

Customize Radio Render

Loading...

function Demo() { const ColorRadio = (props) => ( <Radio {...props} render={({ checked }) => ( <Box toCenter square-48 rounded-8 bg={checked ? 'gray200' : false}> <Box bg={props.value} circle-32></Box> </Box> )} /> ) return ( <RadioGroup defaultValue="green300"> <ColorRadio value="red300"></ColorRadio> <ColorRadio value="green300"></ColorRadio> <ColorRadio value="blue300"></ColorRadio> </RadioGroup> ) }

function Demo() {
  const ColorRadio = (props) => (
    <Radio
      {...props}
      render={({ checked }) => (
        <Box toCenter square-48 rounded-8 bg={checked ? 'gray200' : false}>
          <Box bg={props.value} circle-32></Box>
        </Box>
      )}
    />
  )
  return (
    <RadioGroup defaultValue="green300">
      <ColorRadio value="red300"></ColorRadio>
      <ColorRadio value="green300"></ColorRadio>
      <ColorRadio value="blue300"></ColorRadio>
    </RadioGroup>
  )
}

LIVE DEMO

Customize RadioGroup renderItem

Loading...

function Demo() { const options = [ { label: 'Free', value: 'free', desc: 'This is Free version' }, { label: 'Member', value: 'member', desc: 'This is Member version' }, { label: 'Pro', value: 'pro', desc: 'This is Pro version' }, ] return ( <RadioGroup options={options} column spaceY-8 flex renderItem={({ item, defaultRadio, checked }) => ( <Box p4 toLeft border ringBrand500={checked} borderColor={checked ? 'brand500' : 'gray400'} rounded-8 w-400 > {defaultRadio} <Box ml-16> <Box>{item.label}</Box> <Box gray400>{item.desc}</Box> </Box> </Box> )} /> ) }

function Demo() {
  const options = [
    { label: 'Free', value: 'free', desc: 'This is Free version' },
    { label: 'Member', value: 'member', desc: 'This is Member version' },
    { label: 'Pro', value: 'pro', desc: 'This is Pro version' },
  ]

  return (
    <RadioGroup
      options={options}
      column
      spaceY-8
      flex
      renderItem={({ item, defaultRadio, checked }) => (
        <Box
          p4
          toLeft
          border
          ringBrand500={checked}
          borderColor={checked ? 'brand500' : 'gray400'}
          rounded-8
          w-400
        >
          {defaultRadio}
          <Box ml-16>
            <Box>{item.label}</Box>
            <Box gray400>{item.desc}</Box>
          </Box>
        </Box>
      )}
    />
  )
}

LIVE DEMO