The Radio button design has been kept minimal – understanding that the component will likely be used in a form with other components. The animation, however, has been built-in the add visual interest and to more importantly convey important feedback to the user.
Radio buttons enable a user to make a single selection among a group of options. When using a Radio, it's recommended to list options in a logical order (alphabetically, numerically, etc.) and include at least 2 or more options. By default, it's recommended to have no Radio selected unless there is a most likely or recommended selection.
Radio buttons should be used in a RadioGroup. The Radio Group will provide a lot more functionality that should be used in a form. Radio is simply a radio button without any functionality that a form will need.
|value||should contain the value assosciated with the radio button||-|
|disabled||when true, radio button will be disabled|
checked- emitted with the radio buttons value
blur- emitted when blur occurs
|default||content will be placed in a label|
feather-radio- radio element that responds to click and key presses
feather-radio-label- label element
|label||label for the radio group||-|
|modelValue||current value selected by the radio group||-|
|hint||hint text to be displayed below the group||-|
|error||error text to be displayed below the group||-|
|vertical||when true will put radio buttons in a vertical layout|
|schema||a schema for use in validation||-|
update:modelValue- triggered with the selected radio buttons value
blur- triggers when radio button loses focus inside the group
default- Radios to be used in group
feather-radio-group- group element that responds to key presses
data-ref-id attribute will cause them to be applied to the component root container
div. All other attributes are inherited to the
input where applicable. Some will be ignored if they conflict with attributes used for accessibility.