Radio

Basic


 apple
 orange
 watermelon
import React from 'react'
import { Radio, RadioGroup, Boxer, useRadioState } from '@smooth-ui/core-sc'

function Example() {
  const radio = useRadioState()
  return (
    <RadioGroup {...radio} aria-label="fruits">
      <Boxer my={1}>
        <label>
          <Radio {...radio} value="apple" /> apple
        </label>
        <label>
          <Radio {...radio} value="orange" /> orange
        </label>
        <label>
          <Radio {...radio} value="watermelon" /> watermelon
        </label>
      </Boxer>
    </RadioGroup>
  )
}

render(<Example />)import React from 'react'
import { Radio, RadioGroup, Boxer, useRadioState } from '@smooth-ui/core-sc'
function Example() {
  const radio = useRadioState()
  return (
    <RadioGroup {...radio} aria-label="fruits">
      <Boxer my={1}>
        <label>
          <Radio {...radio} value="apple" /> apple
        </label>
        <label>
          <Radio {...radio} value="orange" /> orange
        </label>
        <label>
          <Radio {...radio} value="watermelon" /> watermelon
        </label>
      </Boxer>
    </RadioGroup>
  )
}
render(<Example />)

Sizes

Set scales using scale prop like "xs", "sm", "lg" or "xl". The default scale is "base".


Extra small
Small
Default
Large
Extra large
import React from 'react'
import {
  Radio,
  RadioGroup,
  Boxer,
  FormCheck,
  FormCheckLabel,
  useRadioState,
} from '@smooth-ui/core-sc'

function Example() {
  const radio = useRadioState()
  const toggle = () => setChecked(!checked)
  return (
    <RadioGroup {...radio} aria-label="sizes">
      <Boxer my={3}>
        <FormCheck>
          <Radio {...radio} scale="xs" value="xs" name="xs" />
          <FormCheckLabel scale="xs" name="xs">
            Extra small
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="sm" value="sm" name="sm" />
          <FormCheckLabel scale="sm" name="sm">
            Small
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="base" value="base" name="base" />
          <FormCheckLabel scale="base" name="base">
            Default
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="lg" value="lg" name="lg" />
          <FormCheckLabel scale="lg" name="lg">
            Large
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="xl" value="xl" name="xl" />
          <FormCheckLabel scale="xl" name="xl">
            Extra large
          </FormCheckLabel>
        </FormCheck>
      </Boxer>
    </RadioGroup>
  )
}

render(<Example />)import React from 'react'
import {
  Radio,
  RadioGroup,
  Boxer,
  FormCheck,
  FormCheckLabel,
  useRadioState,
} from '@smooth-ui/core-sc'
function Example() {
  const radio = useRadioState()
  const toggle = () => setChecked(!checked)
  return (
    <RadioGroup {...radio} aria-label="sizes">
      <Boxer my={3}>
        <FormCheck>
          <Radio {...radio} scale="xs" value="xs" name="xs" />
          <FormCheckLabel scale="xs" name="xs">
            Extra small
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="sm" value="sm" name="sm" />
          <FormCheckLabel scale="sm" name="sm">
            Small
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="base" value="base" name="base" />
          <FormCheckLabel scale="base" name="base">
            Default
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="lg" value="lg" name="lg" />
          <FormCheckLabel scale="lg" name="lg">
            Large
          </FormCheckLabel>
        </FormCheck>
        <FormCheck>
          <Radio {...radio} scale="xl" value="xl" name="xl" />
          <FormCheckLabel scale="xl" name="xl">
            Extra large
          </FormCheckLabel>
        </FormCheck>
      </Boxer>
    </RadioGroup>
  )
}
render(<Example />)

Disabled

Disable using disabled prop.


 disabled
import React from 'react'
import { Radio, RadioGroup, Boxer, useRadioState } from '@smooth-ui/core-sc'

function Example() {
  const radio = useRadioState()
  return (
    <RadioGroup {...radio} aria-label="radios">
      <label>
        <Radio disabled {...radio} value="disabled" /> disabled
      </label>
    </RadioGroup>
  )
}

render(<Example />)import React from 'react'
import { Radio, RadioGroup, Boxer, useRadioState } from '@smooth-ui/core-sc'
function Example() {
  const radio = useRadioState()
  return (
    <RadioGroup {...radio} aria-label="radios">
      <label>
        <Radio disabled {...radio} value="disabled" /> disabled
      </label>
    </RadioGroup>
  )
}
render(<Example />)

Accessibility

Radio uses Reakit Radio under the hood, it means it follows WAI-ARIA Radio Button/Group Pattern.

API

useRadioState

See Reakit documentation.

Radio

Property	Type	Required	Default	Description
checked	boolean	false	-	Same as the `checked` attribute.
disabled	boolean	false	-	Same as the HTML attribute.
focusable	boolean	false	-	When an element is `disabled`, it may still be `focusable`. It works similarly to `readOnly` on form elements. In this case, only `aria-disabled` will be set.
stopId	string	false	-	Element ID.
value	any	false	-	Same as the value attribute.
scale	enum	false	-
Show xstyled properties

Radio also includes a bunch of state properties, see Reakit documentation.

RadioGroup

Property	Type	Required	Default	Description
children	node	false	-
aria-orientation	enum	false	-	Specify the orientation of the radio group.
Show xstyled properties

Smooth UI

Radio

Basic

Sizes

Disabled

Accessibility

API

useRadioState

Radio

RadioGroup