Prepared Docs

Input is used to capture text-based user input with support for labels, validation, icons, affixes, masking, and integrated select controls. It provides a comprehensive text input solution with two main components: Input for standard text entry and InputWithSelect for inputs paired with dropdown selections. Built on Radix UI's TextField component, both ensure consistent form patterns across the interface with extensive customization options including labels, helper text, icons, prefixes, suffixes, input masking, and validation states.

Input Props

Name	Default	Description
`label`		Label text displayed above the input field.
`labelColor`		Enum for label color variants. Other variations of `LabelColor` include `Base \| Error`.
`placeholder`		Placeholder text displayed when the input is empty.
`helperText`		Helper text displayed below the input field.
`helperTextColor`		Enum for helper text color variants. Other variations of `TextColor` include `Base \| Alt \| Alt2 \| Error \| Success`.
`leadIcon`		The SVG asset for an icon displayed before the input field.
`tailIcon`		The SVG asset for an icon displayed after the input field.
`prefix`		Text or React node displayed before (to the left of) the input field with a bordered container.
`suffix`		Text or React node displayed after (to the right of) the input field with a bordered container.
`type`	`"text"`	Standard HTML input type. Supported types include `text \| number \| email \| password \| tel \| url \| search \| date \| time`.
`masked`	`false`	Whether to apply input masking. Automatically enabled for `tel` and `url` types.
`maskType`		Enum for mask pattern. Variations of `MaskType` include `Phone \| Url \| ZipCode \| Currency \| Date`.
`onRawChange`		Callback providing both raw (unmasked) and formatted values: `(rawValue: string, formattedValue: string) => void`.
`disabled`	`false`	Whether the input is disabled.
`required`	`false`	Whether the input is required for form submission.
`readOnly`	`false`	Whether the input is read-only.
`value`		Controlled value of the input.
`defaultValue`		Default value for uncontrolled usage.
`onChange`		Callback fired when the input value changes.
`onFocus`		Callback fired when the input receives focus.
`onBlur`		Callback fired when the input loses focus.
`onKeyDown`		Callback fired when a key is pressed.
`id`		Unique identifier for the input field.
`name`		Name attribute for form submission.
`autoFocus`	`false`	Whether to automatically focus the input on mount.
`autoComplete`		Browser autocomplete behavior hint.
`maxLength`		Maximum number of characters allowed.
`minLength`		Minimum number of characters required.
`pattern`		Regular expression pattern for validation.
`aria-invalid`		Indicates whether the input value is invalid.
`aria-required`		Indicates whether the input is required.
`aria-describedby`		ID of element describing the input.
`aria-errormessage`		ID of element containing error message (use only when `aria-invalid` is true).

InputWithSelect Props

Inherits all Input props plus:

Name	Default	Description
`selectControlPosition`	`required`	Enum for select position. Values include `Lead \| Tail`.
`selectOptions`	`required`	Array of options with `value` and `label` properties.
`selectedValue`		Currently selected value in the dropdown.
`onSelectChange`		Callback fired when the select value changes: `(value: string) => void`.
`selectWidth`	`SelectControlWidth.Medium`	Enum for select width. Values include `Small \| Medium \| Large`.
`selectDisabled`	`false`	Whether the select dropdown is disabled.
`selectPlaceholder`		Placeholder text for the select dropdown.

Basic Text Input

Use for standard text entry with label and placeholder.

Controlled vs Uncontrolled

Controlled Input

Use when you need full control over the input state.

Uncontrolled Input

Use when you don't need to control the state directly.

With value (static)

Icons

Required and helper text

Error state

Disabled

Prefix and suffix

Masks

With Affixes

Use prefixes and suffixes to display static text or symbols adjacent to the input.

Prefix

Suffix

Both Affixes

With Helper Text

Use to provide additional context or instructions for the input.

With Icons

Use icons to provide visual context about the input's purpose or state.

Lead Icon

Tail Icon

Both Icons

With Input Masking

Use masking to format input values automatically for common patterns.

Phone Number

Currency

ZIP Code

Date

URL

With Raw Value Callback

Use when you need both the formatted display value and the raw unmasked value.

Validation States

Use to communicate input validation status to users.

Error State

Success State

Disabled State

Use when the input should not be editable.

Read-Only State

Use when the value should be visible but not editable.

Required Input

Use to indicate that a field must be completed.

With Auto-Focus

Use to automatically focus the input when the component mounts.

Input With Select (Lead Position)

Use when you need a dropdown selection before the input field.

Input With Select (Tail Position)

Use when you need a dropdown selection after the input field.

Phone Input With Country Code

Use for international phone number entry with country code selection.

Input With Select and Affixes

Combine select controls with prefix or suffix text.

Disabled Input With Select

Use when the combined input and select should not be editable.

Form Integration

Use inputs within forms with proper labeling and validation.

Input / Usage

Accessibility / Labels and Identification

View Source

Submit Issue