Input

Displays a form input field or a component that looks like an input field.

Basic

With Label

Label

With Description

Label

Please do not leave this field blank.

With Validation

Input with error

Email is invalid

File

File input

Character Limit

Input with character limit

0/50

OTP

OTP input (spaced)

[data-input-otp] { --nojs-bg: white !important; --nojs-fg: black !important; background-color: var(--nojs-bg) !important; color: var(--nojs-fg) !important; caret-color: var(--nojs-fg) !important; letter-spacing: .25em !important; text-align: center !important; border: 1px solid var(--nojs-fg) !important; border-radius: 4px !important; width: 100% !important; } @media (prefers-color-scheme: dark) { [data-input-otp] { --nojs-bg: black !important; --nojs-fg: white !important; } }

With Icon

Input with end icon

Table of contents

Basic With Label With Description With Validation File Character Limit OTP With Icon