# Radio button

Radio buttons can only be use with forms

## Radio button group (preffered)

```js
const list = ipsum.list(5, () => ipsum.name());
const [value, setValue] = React.useState({ group: list[1] });

<SilkeForm value={value} onChange={setValue}>
  <SilkeRadioButtonGroup
    label="Group label (optinal)"
    name="group"
    items={list.map((v) => ({ label: v, value: v }))}
    value={value}
    onChange={setValue}
  />
  <SilkeRadioButtonGroup
    label="Required group"
    name="requiredGroup"
    items={list.map((v) => ({ label: v, value: v }))}
    value={value}
    required
    onChange={setValue}
  />
  <pre>Value: {JSON.stringify(value)}</pre>
</SilkeForm>;
```

## Standablone radio button

```js
const list = ipsum.list(5, () => ipsum.name());
const [value, setValue] = React.useState({ name: list[1] });

<SilkeForm value={value} onChange={setValue}>
  {list.map((name) => (
    <SilkeRadioButton key={name} name="name" value={name} label={name} />
  ))}

  {list.map((name) => (
    <SilkeRadioButton key={name} name="required" value={name} label={name} required />
  ))}
  <pre>Value:{JSON.stringify(value)}</pre>
</SilkeForm>;
```