shadowRadios should be used inside of a radio group. Pressing a radio will check it and uncheck the previously selected radio, if there is one. They can also be checked programmatically by setting the value property of the parent radio group to the value of the radio.
When radios are inside of a radio group, only one radio will be checked at any time. If more than one item should be selected, checkboxes should be used instead. Radios can be disabled within a group to prevent interaction with them.
Basic Usageโ
Deselecting Radiosโ
By default, once a radio is selected it cannot be deselected; pressing it again will keep it selected. This behavior can be modified by using the allowEmptySelection property on the parent radio group, which enables the radios to be deselected.
Themingโ
CSS Custom Propertiesโ
CSS Shadow Partsโ
Propertiesโ
| Description | The color to use from your application's color palette. Default options are: "primary", "secondary", "tertiary", "success", "warning", "danger", "light", "medium", and "dark". For more information on colors, see theming. |
| Attribute | color |
| Type | "danger" ๏ฝ "dark" ๏ฝ "light" ๏ฝ "medium" ๏ฝ "primary" ๏ฝ "secondary" ๏ฝ "success" ๏ฝ "tertiary" ๏ฝ "warning" ๏ฝ string & Record<never, never> ๏ฝ undefined |
| Default | undefined |
disabledโ
| Description | If true, the user cannot interact with the radio. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
| Description | The mode determines which platform styles to use. |
| Attribute | mode |
| Type | "ios" ๏ฝ "md" |
| Default | undefined |
| Description | The name of the control, which is submitted with the form data. |
| Attribute | name |
| Type | string |
| Default | this.inputId |
| Description | the value of the radio. |
| Attribute | value |
| Type | any |
| Default | undefined |
| Name | Description |
|---|
navBlur | Emitted when the radio button loses focus. |
navFocus | Emitted when the radio button has focus. |
Methodsโ
No public methods available for this component.
CSS Shadow Partsโ
| Name | Description |
|---|
container | The container for the radio mark. |
mark | The checkmark or dot used to indicate the checked state. |
CSS Custom Propertiesโ
| Name | Description |
|---|
--border-radius | Border radius of the radio |
--color | Color of the radio |
--color-checked | Color of the checked radio |
--inner-border-radius | Border radius of the inner checked radio |
No slots available for this component.