Text Field
Component typeNuxtUI/Input
Design SystemsUXD
Default
Leading
Use the #leading slot to set the content of the leading icon.
Trailing
Use the #trailing slot to set the content of the trailing icon.
EUR
Action Button
You can for example create a clearable Input by injecting a Button in the trailing slot that displays when some text is entered.
As leading and trailing icons are wrapped around a pointer-events-none class, if you inject a clickable element in the slot, you need to remove this class to make it clickable by adding :ui="{ icon: { trailing: { pointer: '' } } }" to the Input.
Config Settings
Change the size of the Input. The unit is px
default: 32px
Change the visual style of the Input.
default: white
Change the visual style of the Input.
default: outline
Custom input width by ui config { wrapper: "w-full" }
Use the loading prop to show a loading icon and disable the Input.
install @iconify-json/svg-spinners
set the icon position. default: leading
remove the padding of the Input.