Select Wrapper 🚫 Table of Contents

• Props
• Slots

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultdescription descriptionThe description text.string''dropdownDirection dropdown-directionChanges the direction to which the dropdown list appears.type SelectWrapperDropdownDirection =
'down'
'up'
'auto''auto'filter filterFilters select options by typing a characterbooleanfalsehideLabel 🛠hide-labelShow or hide label. For better accessibility it is recommended to show the label.boolean
BreakpointCustomizable<boolean>falselabel labelThe label text.string''message messageThe message styled depending on validation state.string''native nativeForces rendering of native browser select dropdownbooleanfalsestate stateThe validation state.type SelectWrapperState =
'none'
'error'
'success''none'theme themeAdapts the select color depending on the theme.type Theme =
'light'
'dark'
'auto''light'SlotsSlotDescriptionisRequiredaltPropallowedTagNames<slot name="label"> Shows a label. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot name="description"> Shows a description. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.<slot> Default slot for the `select` tag.<slot name="message"> Shows a state message. Only [phrasing content](https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_categories#Phrasing_content) is allowed.