Forms
Input
A fundamental tool for receiving user input is a text field, which allows data to be provided or altered using either the keyboard or mouse.
Basic examples
Default
Utilize the `input` component class to style the input.
Placeholder
Basic input with placeholder.
Label and helper text
Please use `label-text` for the label and `helper-text` for the text that appears at the bottom as helper text.
Hidden label
`label` elements hidden using the `.sr-only` class.
Types
Default
Default Input.
Floating label
The Floating Input Component provides a text input with a floating label. Use `.input-floating` for the wrapper, `.input` for the input field, and `.input-floating-label` for the label.
Sizes
Default
Add responsive class `input-{size}` where `{size} = xs|sm|md|lg|xl` for input of different sizes.
Floating label
Add responsive class `input-{size}` where `{size} = xs|sm|md|lg|xl` for input of different sizes for floating label.
Validation State
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Input Group
Inline label
To create an input group, use `input` as a wrapper. To align the `label` or `icons`, apply the `my-auto` class. This ensures consistent vertical alignment within the group.
Leading icon
Add a leading icon inside input.
Trailing icon
Add a trailing icon inside input.
Leading and trailing icon
Add a leading and trailing icon inside input.
With keyboard shortcut
Utilizes `kbd` component class with input.
Checkbox and radios
Place any checkbox or radio option within an input group’s addon instead of text.
Inline select
This example demonstrates an inline select component. The `.input` class serves as a wrapper, incorporating `pe-0` for padding reset and `items-center` for vertical alignment. Additionally, `ms-3` is used to manage spacing.
Shape
Pill input
We can manage the input's radius using the <a href="https://tailwindcss.com/docs/border-radius" target="_blank" class="link link-primary">rounded</a> utility class provided by Tailwind CSS.
Illustrations
Helper text
Implement varying input styles accompanied by helper text.
No focus
Disable the default focus on the `input` using `no-focus` class when necessary.
Disabled
Add the `disabled` boolean attribute on an input to remove pointer events, and prevent focusing.
Readonly
Add the `readonly` boolean attribute on an input to prevent modification of the input’s value.
Join
Input with button
Combine a button with the input field using the `join` method.
Input group with button
Combine a button with the input input.
Input with select
Combine a select with the input input.
Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
input | component | Base class for form input. |
input-floating | component | Base class for floating form input. |
input-floating-label | part | Floats the label to the top. |
label-text | part | Base class for title label text. |
helper-text | part | Base class for helper label text. |
no-focus | modifier | remove default focus from input. |
is-valid | state | Adds success style to the input. |
is-invalid | state | Adds error style to the input. |
input-xs | size | Input with Extra small size. |
input-sm | size | Input with Smaller size. |
input-md | size | Input with medium(default) size. |
input-lg | size | Input with Larger size. |
input-xl | size | Input with Extra large size. |