radio

Small Variant•
Horizontal layout

Props

Prop name	Type	Default	Description
`id`	`string`	`Required`	Id for this input, also used to bind it to the label and validation messages.
`valid`	`boolean \| undefined`		Triggers visual validation output.
`info`	`ReactNode`		Provides extra information for this input field.
`innerRef`	`Ref<HTMLInputElement> \| undefined`		React ref forwarded to the "input" element.
`small`	`boolean \| undefined`		Shows smaller radiobutton.
`extraClasses`	`string \| undefined`		Injection in className.
`label`	`ReactNode`		The radio label. If the radio does not have a visible label then `aria-label` is required.

Radio component provides a simple radio button element for you to consume. id prop is required as it's used to bind the label to the input.

value prop (native) is also required as radio buttons do not allow the user to change their value, as well as a name prop, as radio should always have name to define what group they belong to.

All other props will be directly passed to the nested input element, you can use events or native properties as you would on a normal input field.

import { Fieldset, Legend, Radio } from '@flixbus/honeycomb-react';
<Fieldset>
  <Legend>Pick your genre</Legend>
  <Radio label="Metal" id="Metal" name="music" value="metal" key="music-metal" />
  <Radio label="Rock" id="Rock" name="music" value="rock" key="rock-metal" />
  <Radio label="Pop" id="Pop" name="music" value="pop" key="pop-metal" />
  <Radio label="Indie" id="Indie" name="music" value="indie" key="indie-metal" />
</Fieldset>
import { Fieldset, Legend, Radio } from '@flixbus/honeycomb-react';
<Fieldset>
  <Legend>Pick your genre</Legend>
  <Radio label="Metal" id="Metal" name="music" value="metal" key="music-metal" />
  <Radio label="Rock" id="Rock" name="music" value="rock" key="rock-metal" />
  <Radio label="Pop" id="Pop" name="music" value="pop" key="pop-metal" />
  <Radio label="Indie" id="Indie" name="music" value="indie" key="indie-metal" />
</Fieldset>

You can trigger error state for radios by setting valid to false, though radios have their own info prop usually they come in groups and it's more handy to use Fieldset info prop:

import { Fieldset, Radio } from '@flixbus/honeycomb-react';
<Fieldset info="Please select an option" valid={false}>
    <Radio
        label="To bee..."
        valid={false}
        id="error-radio-1"
        name="radio-question"
        value="1"
        key="example-radio-error-1"
    />
    <Radio
        label="Or not to bee?"
        valid={false}
        id="error-radio-2"
        name="radio-question"
        value="0"
        key="example-radio-error-2"
    />
</Fieldset>
import { Fieldset, Radio } from '@flixbus/honeycomb-react';
<Fieldset info="Please select an option" valid={false}>
    <Radio
        label="To bee..."
        valid={false}
        id="error-radio-1"
        name="radio-question"
        value="1"
        key="example-radio-error-1"
    />
    <Radio
        label="Or not to bee?"
        valid={false}
        id="error-radio-2"
        name="radio-question"
        value="0"
        key="example-radio-error-2"
    />
</Fieldset>

Small Variant

To show a smaller radio button simply add the small prop to it:

import { Fieldset, Radio } from '@flixbus/honeycomb-react';
<Fieldset>
  <Radio label="Tiny" id="tiny-radio" name="tiny-radio" value="tiny" small />
</Fieldset>
import { Fieldset, Radio } from '@flixbus/honeycomb-react';
<Fieldset>
  <Radio label="Tiny" id="tiny-radio" name="tiny-radio" value="tiny" small />
</Fieldset>

Horizontal layout

Since Fieldset component also allows for horizontal placement for the elements inside, we can easily have radios displayed side-by-side like so:

import { Fieldset, Legend, Radio } from '@flixbus/honeycomb-react';
<Fieldset horizontal>
  <Legend>Is it flat?</Legend>
  <Radio label="No" id="horizontal-radio-left" name="horizontal-radio" value="No" key="horizontal-radio-left" />
  <Radio label="No!" id="horizontal-radio-right" name="horizontal-radio" value="No" key="horizontal-radio-right" />
</Fieldset>
import { Fieldset, Legend, Radio } from '@flixbus/honeycomb-react';
<Fieldset horizontal>
  <Legend>Is it flat?</Legend>
  <Radio label="No" id="horizontal-radio-left" name="horizontal-radio" value="No" key="horizontal-radio-left" />
  <Radio label="No!" id="horizontal-radio-right" name="horizontal-radio" value="No" key="horizontal-radio-right" />
</Fieldset>