ui/docs/content/3.forms/1.input.md

github

github
true

Usage

::component-card

baseProps: name: 'input'

::

Size

Use the size prop to change the size of the Input.

::component-card

baseProps: name: 'input' props: size: 'sm'

::

Placeholder

::component-card

baseProps: name: 'input' props: placeholder: 'Search...'

::

Appearance

Use the appearance prop to change the style of the Input.

::component-card

baseProps: name: 'input' placeholder: 'Search...' props: appearance: 'white'

::

Icon

Use any icon from Iconify by setting the icon prop by using this pattern: i-{collection_name}-{icon_name}.

Use the leading and trailing props to set the icon position or the leadingIcon and trailingIcon props to set a different icon for each position.

::component-card

baseProps: name: 'input' props: icon: 'i-heroicons-magnifying-glass-20-solid' appearance: 'white' size: 'sm' trailing: false placeholder: 'Search...' excludedProps:

• icon
• placeholder

---

::

Disabled

Use the disabled prop to disable the Input.

::component-card

baseProps: name: 'input' props: placeholder: 'Search...' appearance: 'white' disabled: true excludedProps:

• placeholder

---

::

Loading

Use the loading prop to show a loading icon and disable the Input.

Use the loadingIcon prop to set a different icon or change it globally in ui.input.default.loadingIcon. Defaults to i-heroicons-arrow-path-20-solid.

::component-card

baseProps: name: 'input' placeholder: 'Search' props: loading: true icon: 'i-heroicons-magnifying-glass-20-solid' excludedProps:

• icon

---

::

Group

Props

:component-props

Preset

:component-preset