ion-select-option
Select Options are components that are child elements of a Select. Each option defined is passed and displayed in the Select dialog.
For usage examples, see the Select documentation.
Properties
description
| Description | Text that is placed underneath the option text to provide additional details about the option. |
| Attribute | description |
| Type | string ｜ undefined |
| Default | undefined |
disabled
| Description | If true, the user cannot interact with the select option. This property does not apply when interface="action-sheet" as ion-action-sheet does not allow for disabled buttons. |
| Attribute | disabled |
| Type | boolean |
| Default | false |
justify
| Description | How to pack the label and the option's selection control within a line. "start": The label and radio will appear on the left in LTR and on the right in RTL. "end": The label and radio will appear on the right in LTR and on the left in RTL. "space-between": The label and radio will appear on opposite ends of the line with space between the two elements.Applies to the alert, popover, and modal interfaces, but has no visible effect on radio options in popover or modal on the md and ionic themes (the radio control is hidden there).When unset, the interface picks a default based on theme and control type. |
| Attribute | justify |
| Type | "end" ｜ "space-between" ｜ "start" ｜ undefined |
| Default | undefined |
labelPlacement
| Description | Where the label is placed relative to the option's selection control (radio circle or checkbox box) when the option is rendered in an alert, popover, or modal interface. "start": The label will appear to the left of the radio in LTR and to the right in RTL. "end": The label will appear to the right of the radio in LTR and to the left in RTL.Applies to the alert, popover, and modal interfaces, but has no visible effect on radio options in popover or modal on the md and ionic themes (the radio control is hidden there).When unset, the interface picks a default based on theme and control type. |
| Attribute | label-placement |
| Type | "end" ｜ "start" ｜ undefined |
| Default | undefined |
mode
| Description | The mode determines the platform behaviors of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | mode |
| Type | "ios" ｜ "md" |
| Default | undefined |
theme
| Description | The theme determines the visual appearance of the component. This is a virtual property that is set once during initialization and will not update if you change its value after the initial render. |
| Attribute | theme |
| Type | "ios" ｜ "md" ｜ "ionic" |
| Default | undefined |
value
| Description | The text value of the option. |
| Attribute | value |
| Type | any |
| Default | undefined |
Events
No events available for this component.
Methods
No public methods available for this component.
CSS Shadow Parts
No CSS shadow parts available for this component.
CSS Custom Properties
No CSS custom properties available for this component.
Slots
| Name | Description |
|---|---|
| `` | Content is placed between the named slots if provided without a slot. |
end | Content is placed to the right of the select option text in LTR, and to the left in RTL. |
start | Content is placed to the left of the select option text in LTR, and to the right in RTL. |