Radio buttons
e-radio Component is a user interface element used for selecting a single option from a set of mutually exclusive choices. It presents a list of options, and users can choose one option at a time by clicking on a radio button associated with each choice.
<template>
<e-radio-group
v-model="example"
label="label"
color="primary"
>
<e-radio model-value="1" label="option 1"></e-radio>
<e-radio model-value="2" label="option 2"></e-radio>
<e-radio model-value="3" label="option 3"></e-radio>
</e-radio-group>
</template>
Props
Explore the available props for the form component
e-radio-group
| Property | Description | Type | Default |
|---|---|---|---|
| retain-color | allows the input to maintain the color regardless of the state it is in. | boolean | false |
| disabled | Modify the style and change the input state to disabled | boolean | false |
| readonly | change the input state to disabled | boolean | false |
| label-inline | set the css rule white-space: nowrap; to the label | boolean | false |
| detail | displays an informational message below the component | string | '' |
| outlined | applies an outlined style | boolean | false |
| label | label associated with the input field | boolean | false |
| model-value | The v-model value of the component. | boolean | false |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | primary |
| detail-errors | shows an error message below the component and changes the state | Array | [] |
| label-min-width | This sets a minimum width in px for the label | string | |
| cols | Sets the default number of columns the component extends. Available options are: {1...24}. | string | number | |
| sm | Changes the number of columns on small and greater breakpoints. | string | number | |
| md | Changes the number of columns on medium and greater breakpoints. | string | number | |
| lg | Changes the number of columns on large and greater breakpoints. | string | number | |
| rules | Accepts a array of types function that pass an input value as an argument and must return either true | false or a string containing an error message. This also change the input state. | Array<(param: any)=> string | true> | [] |
| hide-overlay | hides the color layer that covers the component | boolean | false |
| flat | removes the border-bottom from the component | boolean | false |
| row | display the component as a row instead of a column | boolean | false |
e-radio
| Property | Description | Type | Default |
|---|---|---|---|
| retain-color | allows the input to maintain the color regardless of the state it is in. | boolean | false |
| disabled | Modify the style and change the input state to disabled | boolean | false |
| readonly | change the input state to disabled | boolean | false |
| label | label associated with the input field | boolean | false |
| model-value | The v-model value of the component. | boolean | false |
| color | Applies specified color to the component - supports only utility colors (for example primary or secondary) | string | primary |
| label-min-width | This sets a minimum width in px for the label | string |