Input

Input elements are places where users can provide input that goes beyond what a single button could do, like inserting dates, names, options and many more.

Examples of Input Types

Explanation

The input examples consist of the following elements:

• Text Input: A text input field for general text entry.
• Password Input: Uses dots to mask the characters entered.
• Email Input: An email input field for entering email addresses.
• Number Input: A native number input field for entering numeric values.
• Date Input: A date input field for selecting dates. Uses a native date picker of the system.
• Checkbox: Used for binary choises, able to select multiple inputs at a time.
• Radio Button: A radio button for selecting one option from a group.

Input status

Inputs can have different states, such as success, error, and warning. These states can be indicated by changing the border color, background color, or adding an icon to the input field.

Explanation

The state examples consist of the following elements:

• Success Input: Indicates that the input is valid or successful.
• Error Input: Indicates that the input is invalid or has an error.
• Warning Input: Indicates that the input has a warning or caution.

Each state is visually represented by changing the border color and background color of the input field. The labels provide clear instructions to the user, Errors and Warnings should be accompanied by a message to explain the issue.

Guidelines

• Use clear and concise labels for input elements.
• Add icons to visually represent the type of input field, and only if you can do it for all the fields in the form.
• Provide appropriate input types (e.g., text, password, email) for different data.
• Extend multiple inputs using a form to group related elements together.

Further Documentation

For more information about implementation and usage, refer to the DaisyUI documentation.