# Radio
# Basic Usage
You selected:
<us-form-group label="Select any historical figure">
<us-form-radio
name="select historical figure"
:options="['Sojourner Truth', 'Frederick Douglass', 'Booker T. Washington', 'George Washington Carver']"
v-model="checkedValues"
/>
</us-form-group>
1
2
3
4
5
6
7
2
3
4
5
6
7
You selected:
<us-form-group label="Select any historical figure">
<us-form-radio
name="select historical figure"
:options="[
{value: 'sojourner-truth', label: 'Sojourner Truth', default:true},
{value: 'frederick-douglass', label: 'Frederick Douglass'},
{value: 'booker-washington', label: 'Booker T. Washington'},
{value: 'george-washington-carver', label: 'George Washington Carver', disabled:true}
]"
v-model="checkedValues"
/>
</us-form-group>
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# Validation
You can make use of built-in validation, for example;
You entered:
<us-form @submit="onSubmit()" :validate="true" v-slot="{isValid, isDirty}">
<us-form-group label="A basic text field">
<us-form-input
name="text-input2"
v-model="currentValue"
:rules="{required:true}"
/>
</us-form-group>
<us-button type="submit" variant="primary">Submit</us-button>
<us-tag variant="danger" v-if="isValid === false">Invalid</us-tag>
<us-tag variant="success" v-else-if="isValid === true">Valid</us-tag>
<us-tag variant="dark" v-if="isDirty === true">Dirty</us-tag>
<us-tag variant="light" v-else-if="isDirty === false">Prestine</us-tag>
</us-form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14