Text Field Wrapper 🚫 Table of Contents

• Props
• Events
• Slots
• CSS Variables

Propertiestype BreakpointCustomizable<T> = { base: T; xs?: T; s?: T; m?: T; l?: T; xl?: T; xxl?: T; };PropertyAttributeDescriptionTypeDefaultactionIcon action-iconAction icon can be set to locate for input type="search" in order to display an action button.type TextFieldWrapperActionIcon =
undefined
'locate'undefinedactionLoading action-loadingDisables the action button and shows a loading indicator. No events will be triggered while loading state is active.booleanfalsedescription descriptionThe description text.string''hideLabel 🛠hide-labelShow or hide label and description text. 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''showCharacterCount 🚫show-character-countdeprecated since v3.0.0, will be removed with next major release, use showCounter instead. Show or hide max character count.booleanundefinedshowCounter show-counterShow or hide max character count.booleantrueshowPasswordToggle 🧪show-password-toggleexperimental Show or hide password toggle for input type="password".booleantruestate stateThe validation state.type TextFieldWrapperState =
'none'
'error'
'success''none'submitButton submit-buttonShow search button if wrapped inside a form.booleantruetheme themeAdapts the color depending on the theme.type Theme =
'light'
'dark'
'auto''light'unit unitThe unit text.string''unitPosition unit-positionThe unit position.type TextFieldWrapperUnitPosition =
'prefix'
'suffix''prefix'EventsEventDescriptionTypeaction Emitted when the action button is clicked.CustomEvent<void>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 input.<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.CSS VariablesCSS VariableDescriptiondefaultValue--p-hyphens Sets the CSS `hyphens` property for text elements, controlling whether words can break and hyphenate automatically.auto