---
title: 'Radio Group: Use Cases'
parts:
- Radio Group
- Use Cases
eleventyNavigation:
key: 'Radio Group: Use Cases'
order: 20
parent: Radio Group
title: Use Cases
---
# Radio Group: Use Cases
```js script
import { html } from '@mdjs/mdjs-preview';
import '@lion/ui/define/lion-radio-group.js';
import '@lion/ui/define/lion-radio.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.
## Pre-select
You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
```js preview-story
export const preSelect = () => html`
`;
```
## Disabled
You can disable a specific `lion-radio` option by adding the `disabled` attribute.
```js preview-story
export const disabledRadio = () => html`
`;
```
You can do the same thing for the entire group by setting the `disabled` attribute on the `lion-radio-group` element.
```js preview-story
export const disabledGroup = () => html`
`;
```
## Label
You can use `slot="label"` instead of the `label` attribute for defining more complex labels, such as containing screen reader only text or an anchor.
```js preview-story
export const label = () => html`
`;
```
## Help text
You can add help text on each checkbox with `help-text` attribute on the ``.
```js preview-story
export const helpText = () => html`
`;
```
## Event
You can listen to the `model-value-changed` event whenever the value of the radio group is changed.
```js preview-story
export const event = ({ shadowRoot }) => html`
(ev.target.parentElement.querySelector('#selectedDinosaur').innerText = ev.target.modelValue)}
>
Selected dinosaur: N/A
`;
```