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';
```
## 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('#dinosGroup');
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) {
const selectedValue = value['dinos[]'].find(v => v.checked === true);
const hasError = selectedValue ? selectedValue.value !== 'brontosaurus' : false;
return hasError;
}
static async getMessage() {
return 'You need to select "brontosaurus"';
}
}
const validate = () => {
const radioGroup = document.querySelector('#dinosGroupTwo');
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) {
const selectedValue = value['dinos[]'].find(v => v.checked === true);
const hasError = selectedValue ? selectedValue.value !== 'brontosaurus' : false;
return hasError;
}
static async getMessage() {
return 'You need to select "brontosaurus"';
}
}
const validate = () => {
const radioGroup = document.querySelector('#dinosGroupTwo');
radioGroup.submitted = !radioGroup.submitted;
};
```
```html
```