2.3 KiB
github, description
| github | description |
|---|---|
| true | Display an input field. |
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
Use the placeholder prop to set a placeholder text.
::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' placeholder: 'Search...' props: icon: 'i-heroicons-magnifying-glass-20-solid' appearance: 'white' size: 'sm' trailing: false excludedProps:
- icon
::
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: 'Searching...' props: loading: true icon: 'i-heroicons-magnifying-glass-20-solid' excludedProps:
- icon
::
Group
You can use the InputGroup component to add a label and additional informations to a form element.
::component-card
baseProps: name: 'group' props: label: 'Email' help: "We'll only use this for spam." hint: 'Required' required: true code: >-
---#default :u-input{name="group" placeholder="you@example.com" icon="i-heroicons-envelope"} ::
::alert{icon="i-heroicons-light-bulb"}
This also works with Textarea, Select and SelectMenu components.
::
Props
:component-props
Preset
:component-preset