- GitHub: [BonnierNews/dn-design-system/../web/src/components/radio-button](https://github.com/BonnierNews/dn-design-system/tree/main/web/src/components/radio-button)
- Storybook: [Form > RadioButton](https://designsystem.dn.se/?path=/docs/basic-form-radiobutton--docs)
- Storybook (Latest): [Form > RadioButton](https://designsystem-latest.dn.se/?path=/docs/basic-form-radiobutton--docs)

----

# RadioButton

## Parameters

|parameter | type | required | options | default | description |
|:--- | :--- | :--- | :--- | :--- | :--- |
|name | String | yes | | | |
|buttons | Object | yes | | | Ex. { buttons: [{ id: 'my-id', label: 'my-label', value: 'my-value', checked: true }] } |
|buttons[0].id | String | yes | | | Ex. { buttons: [{ id: 'my-id' }] } |
|buttons[0].value | String | yes | | | Ex. { buttons: [{ value: 'my-value' }] } |
|buttons[0].label | String | no | | | Ex. { buttons: [{ label: 'my-label' }] } |
|buttons[0].selected | bool | no | true, false | false | Ex. { buttons: [{ selected: true }] } |
|disabled | bool | no | true, false | false | |
|error | bool | no | true, false | false | |
|errorMessage | String | no | | | |
|required | bool | no | true, false | false | |
|~validation~ | String | no | | | Not implemented |
|attributes | Object | no | | | Ex. { target: "_blank", "data-test": "lorem ipsum" } |
|classNames | String | no | | | Ex. "my-special-class" |
|forcePx | bool | no | true, false | false | Fixed pixel value is used for typography to prevent scaling based on html font-size |

## Minimum requirement example

### Nunjucks

These are copy paste friendly examples to quickliy get started using a component.

```html
{% from '@bonniernews/dn-design-system-web/components/radio-button/radio-button.njk' import RadioButton %}

{{ RadioButton({
  name: 'radio_name',
  buttons: [
    { label: 'radio-label-1', id: 'radio-id-1', value: 'radio-value-1' },
    { label: 'radio-label-2', id: 'radio-id-2', value: 'radio-value-2', checked: true }
  ]
})}}
```

### SCSS
```scss
@use "@bonniernews/dn-design-system-web/components/radio-button/radio-button";
```
