Radio

import Radio from 'frui/fields/Radio';

Props

Radio accepts all props of a standard HTML input element. See Moz for standard input attributes.

Basics

Radio wraps the HTML standard `<input />` element. Therefore, you can use any input attributes as props.

<Radio rounded name="name" label="Yes" value="yes" defaultChecked />

Events

onUpdate is like onChange except the value is passed instead of the change event.

function Home() {
  const [ value, setValue ] = useState('yes');
  return (
    <span>
      <Radio 
        rounded 
        label="Yes" 
        value="yes" 
        checked={value === 'yes'} 
        onUpdate={value => setValue(value as string)}
      />
      <Radio 
        rounded 
        label="No" 
        value="no" 
        checked={value === 'no'} 
        onUpdate={value => setValue(value as string)}
        className="ml-4"
      />
    </span>
  )
}

On Change

The onChange event is triggered when the value has changed. The following arguments are passed to the event handler:

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Errors

You can pass the error prop to highlight the Radio field red.

<Radio error rounded label="Yes" defaultChecked />

Custom Styles

You can apply rounded, colors and shapes to the Radio component.

Rounded

Use rounded prop to make the radios circular.

<Radio rounded defaultChecked />

Colors

Use blue or orange prop to change the color of radios.

<Radio blue label="Blue" defaultChecked />

Shapes

Use circle, checked or checked prop to change the color of radios.

<Radio square label="Blue" defaultChecked />

Combniations

Try different combinations to get the radios you want.

You can also add your own custom class to Radio components or use any combination of frui-field-option, frui-field-option-control, and frui-field-option-label CSS classes.