#Radio

<Radio.Group
  label="Radio Group:"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
  value="first"
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" />
</Radio.Group>

<Radio.Group
  label="Vertical Group:"
  layout_direction="column"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" checked />
</Radio.Group>

<Radio.Group
  vertical
  label="Vertical Group:"
  layout_direction="column"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" checked />
</Radio.Group>

<Radio.Group
  label="Radio Group with status:"
  layout_direction="column"
  on_change={({ value }) => {
    console.log('on_change', value)
  }}
>
  <Radio label="First" value="first" status="error" />
  <Radio label="Second" value="second" status="Error message" />
  <Radio
    label="Third"
    value="third"
    checked
    status="Info message"
    status_state="info"
  />
</Radio.Group>

<FieldBlock label="Plain Radio group:" layout="horizontal">
  <Radio
    value="first"
    label="First"
    group="MyRadioGroup"
    on_change={({ value, checked }) => {
      console.log('on_change', value, checked)
    }}
    right
  />
  <Radio
    value="second"
    label="Second"
    group="MyRadioGroup"
    on_change={({ value, checked }) => {
      console.log('on_change', value, checked)
    }}
    right
  />
  <Radio
    checked
    value="third"
    label="Third"
    group="MyRadioGroup"
    on_change={({ value, checked }) => {
      console.log('on_change', value, checked)
    }}
    right
  />
</FieldBlock>

<Radio size="medium" label="Medium" right="large" checked />
<Radio size="large" label="Large" checked />

<Radio.Group
  label="Disabled Group:"
  disabled
  label_position="left"
  name="MyGroup"
>
  <Radio label="First" value="first" />
  <Radio label="Second" value="second" />
  <Radio label="Third" value="third" checked />
</Radio.Group>

<Radio.Group label="With suffixes:" label_position="left">
  <Radio label="First" value="first" />
  <Radio
    label="Second"
    value="second"
    suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
  />
  <Radio
    label="Third"
    value="third"
    status="Error message"
    suffix={<HelpButton title="Modal Title">Modal content</HelpButton>}
    checked
  />
</Radio.Group>