import { Story, Meta, html } from '@open-wc/demoing-storybook';
import { loadDefaultFeedbackMessages, Required, Validator } from '@lion/validate';
import '@lion/radio/lion-radio.js';
import '../lion-radio-group.js';
# Radio Group
You should use ``s inside this element.
{html`
`}
```html
```
- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
## Features
Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
- Get or set the checked value of the group:
- modelValue (default) - `checkedValue()`
- formattedValue - `formattedValue()`
- serializedValue - `serializedValue()`
## How to use
### Installation
```sh
npm i --save @lion/radio @lion/radio-group
```
```js
import '@lion/radio/lion-radio.js';
import '@lion/radio-group/lion-radio-group.js';
```
### Model value
The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
Given the dinosaur example above, say that we were to select the last option (diplodocus).
Then the `modelValue` of the `lion-radio-group` will look as follows:
```js
const groupElement = [parent].querySelector('lion-radio-group');
groupElement.modelValue;
=> "diplodocus";
```
### The `name` attribute
The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
## Examples
### Pre-select
You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
{html`
`}
```html
```
### Disabled
You can disable a specific `lion-radio` option by adding the `disabled` attribute.
{html`
`}
```html
```
You can do the same thing for the entire group by setting the `disabled` attribute on the `lion-radio-group` element.
{html`
`}
```html
```
### Validation
{() => {
loadDefaultFeedbackMessages();
const validate = () => {
const radioGroup = document.querySelector('#dinos');
radioGroup.submitted = !radioGroup.submitted;
};
return html`
`;
}}
```js
import { loadDefaultFeedbackMessages, Required } from 'lion/validate';
loadDefaultFeedbackMessages();
const validate = () => {
const radioGroup = document.querySelector('#dinosGroup');
radioGroup.submitted = !radioGroup.submitted;
};
```
```html
```
You can also create a validator that validates whether a certain option is checked.
{() => {
class IsBrontosaurus extends Validator {
constructor() {
super();
this.name = 'IsBrontosaurus';
}
execute(value) {
return value === 'brontosaurus';
}
static async getMessage() {
return 'You need to select "brontosaurus"';
}
}
const validate = () => {
const radioGroup = document.querySelector('#dinosTwo');
radioGroup.submitted = !radioGroup.submitted;
};
return html`
`;
}}
```js
import { loadDefaultFeedbackMessages, Required, Validator } from 'lion/validate';
class IsBrontosaurus extends Validator {
constructor() {
super();
this.name = 'IsBrontosaurus';
}
execute(value) {
return value === 'brontosaurus';
}
static async getMessage() {
return 'You need to select "brontosaurus"';
}
}
const validate = () => {
const radioGroup = document.querySelector('#dinosGroupTwo');
radioGroup.submitted = !radioGroup.submitted;
};
```
```html
```