Radio Group
Radio group inputs allow the user to select a single options from a set of options.
Using the IRadioGroup allows you to choose a value from multiple choices using a single model binding:
Disabled State
You can disable an entire radio group using the disabled property.
Color Variants
You can use the color property to set a light or dark color for your radios.
Size Variants
You're able to use the size property to control the size of your radio group, using one of the available sizes: sm, md, and lg. The default size is set to md.
The chosen size will be applied to all of its child inputs.
Options Object
The IRadioGroup component accepts an array of objects as its options prop.
- each item must contain a
idproperty - the
modelValueproperty will be an array of the selectedidvalues - the
labelproperty is aRenderablewill be used as the radio label.
export interface RadioGroupOption {
id: string | number;
label?: Renderable;
disabled?: boolean;
readonly?: boolean;
[key: string]: any;
}Read more about Renderable props.
Rendering
Expression
Expressions are strings that can be interpolated using the {{ }} syntax.
Render Function
Render functions are functions that return a string or VNode. They receive the option being rendered as an argument.
Component
You can also use a component to render each option. The component will receive the option being rendered as a prop named ctx (context).
Render Per Option
Each option's label field is a Renderable property. This means you can also use a render function to render each option's label.