Themed text field with sizes, variants, and accent colors.
Supports size, variant, accent color, disabled/read-only states, and optional left/right slots.
Summary
Functions
Attributes
color(:string) - Color utility class string. One of: gray, gold, bronze, brown, yellow, amber, orange, tomato, red, ruby, crimson, pink, plum, purple, violet, iris, indigo, blue, cyan, teal, jade, green, grass, lime, mint, sky. Must be one of"gray","gold","bronze","brown","yellow","amber","orange","tomato","red","ruby","crimson","pink","plum","purple","violet","iris","indigo","blue","cyan","teal","jade","green","grass","lime","mint", or"sky".high_contrast(:boolean) - Whether to increase color contrast with the background.m(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mx(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.my(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mt(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mr(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.mb(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.ml(:any) - Margin utility class string or map. Example:1or%{xs: '1', sm: '2'}.size(:string) - TextField size from 1 to 3. Controls height and paddings. Defaults to"2". Must be one of"1","2", or"3".variant(:string) - Visual style variant. One of 'surface', 'classic', or 'soft'. Defaults to"surface". Must be one of"surface","classic", or"soft".type(:string) - Native input type. Defaults to"text". Must be one of"text","email","password","search","number","date","datetime-local","time","week","month","url", or"tel".value(:string) - Defaults tonil.name(:string) - Defaults tonil.placeholder(:string) - Defaults tonil.disabled(:boolean) - Defaults tofalse.readonly(:boolean) - Defaults tofalse.autocomplete(:string) - Defaults tonil.autofocus(:boolean) - Defaults tofalse.inputmode(:string) - Defaults tonil.class(:string) - Defaults tonil.style(:string) - Defaults to"".- Global attributes are accepted. Global attributes and event handlers. Supports all globals plus:
["id", "form", "required", "minlength", "maxlength", "min", "max", "step", "pattern", "aria-label", "aria-labelledby", "aria-describedby"].
Slots
slot- Optional adornment slot. Use :side => 'left' or 'right'. Accepts attributes:side(:string) - Must be one of"left", or"right".