Input

<Input>TailwindCSS Modules

A foundational text field component for forms. Includes built-in support for labels, hints, validation errors, leading icons, trailing tooltips, and password toggles.

InstallationColoxo CLI

npx coloxo add input --style coloxo-css

ES Module ImportPlayground / npm package

import { Input } from '@coloxo/ui';

Design Tokens:

--cx-focus-ring: #2348FF--cx-error-500: #EF4444--cx-border-primary: #E2E8F0--cx-radius-md: 8pxshadow: xs

1. Variant Matrix

Inputs support various states (default, invalid, disabled) and adornments (icons, leading text, shortcuts).

Default	With Icon	With Leading Text	Password (Toggle)
States	Email Basic text input.	Search	Website https://	Password
Validation	Email Invalid email address	Search Search query too short	Website https:// Invalid URL format	Password Password is too weak

2. Control heights (Sizes)

Inputs are available in three standard control heights. Font sizes automatically scale down in the 'sm' variant.

Sizes Specification Grid

size="sm"

Height: 36px

Size (36px)

Dense forms, inline filters

size="md"DEFAULT

Height: 40px

Size (40px)

Standard forms, settings

size="lg"

Height: 44px

Size (44px)

Hero search, auth screens

3. Interactive Props Configurator

Visual Render Canvas

This is a hint text to help user.

tsx

1<Input2  label="Email"3  type="email"4  placeholder="olivia@untitledui.com"5  defaultValue="olivia@untitledui.com"6  tooltip="Enter a work email address"7  hint="This is a hint text to help user."8/>

4. Dark theme

Inputs adapt their background surfaces, focus rings, and error colors seamlessly in dark mode.

Standard input in dark mode.

Password

Username

Username already taken.

5. Enterprise layout compositions

Inputs are often stacked in authentication forms or placed inline in toolbars.

Password

Accessibility

Aria DescribedBy

The component automatically wires up `aria-describedby` to link the input field to both its hint text and validation error messages for screen readers.

Aria Invalid

When the `error` prop is passed, `aria-invalid='true'` is automatically applied to the input element.

Form Field Wiring

Passing a `label` automatically generates a unique ID (if none is provided) and associates the `<label htmlFor>` with the `<input id>`.

Props

Name	Type	Default	Description
size	"sm" \| "md" \| "lg"	md	36 / 40 / 44px height. sm uses 14px text; md/lg use 16px.
hint	ReactNode	—	Helper text below the field (alias of description).
error	ReactNode	—	Validation message; shows trailing error icon.
icon	ReactNode \| ComponentType	—	Leading icon.
leadingText	string	—	Inline leading text (e.g. https://).
tooltip	string	—	Trailing help icon with tooltip.
shortcut	string \| boolean	—	Trailing shortcut badge (true → ⌘K).
type	string	—	Use "password" for show/hide toggle.