Input

If you pass the isClearable property to the input, it will have a clear button at the end of the input, it will be visible when the input has a value.

Start & End Content

You can use the startContent and endContent properties to add content to the start and end of the input.

Example with regex email validation:

Controlled

You can use the value and onValueChange properties to control the input value.

Note: Anchor Input also supports native events like onChange, useful for form libraries

Slots

base: Input wrapper, it handles alignment, placement, and general appearance.
label: Label of the input, it is the one that is displayed above, inside or left of the input.
mainWrapper: Wraps the inputWrapper when position is outside / outside-left.
inputWrapper: Wraps the label (when it is inside) and the innerWrapper.
innerWrapper: Wraps the input, the startContent and the endContent.
input: The input element.
clearButton: The clear button, it is at the end of the input.
helperWrapper: Wraps the description and the errorMessage.
description: The description of the input.
errorMessage: The error message of the input.

Built with a native <input> element.
Visual and ARIA labeling support.
- aria-live attribute for the input field.
- aria-describedby attribute for the input field.
- aria-activedescendant attribute for the input field.
Change, clipboard, composition, selection, and input event support.
Required and invalid states exposed to assistive technology via ARIA.
- aria-required attribute automatically set if required prop is set.
- aria-invalid attribute automatically set if error-prop prop is set.
Support for description and error message help text linked to the input via ARIA.

API

Input Props

Attribute	Type	Description	Default
children	`ReactNode`	The content of the input.	-
variant	`flat` \| `bordered` \| `faded` \| `underlined`	The variant of the input.	`flat`
color	`default` \| `primary` \| `secondary` \| `success` \| `warning` \| `danger`	The color of the input.	`default`
size	`sm` \| `md` \| `lg`	The size of the input.	`md`
radius	`none` \| `sm` \| `md` \| `lg` \| `full`	The radius of the input.	-
label	`ReactNode`	The content to display as the label.	-
value	`string`	The current value of the input (controlled).	-
defaultValue	`string`	The default value of the input (uncontrolled).	-
placeholder	`string`	The placeholder of the input.	-
description	`ReactNode`	A description for the input. Provides a hint such as specific requirements for what to choose.	-
errorMessage	`ReactNode` \| `((v: ValidationResult) => ReactNode)`	An error message for the input. It is only shown when `isInvalid` is set to `true`	-
validate	`(value: string) => ValidationError ｜ true ｜ null ｜ undefined`	Validate input values when committing (e.g. on blur), returning error messages for invalid values. Validation errors are displayed upon form submission if `validationBehavior` is set to `native`. For real-time validation, use the `isInvalid` prop.	-
validationBehavior	`native` \| `aria`	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.	`aria`
startContent	`ReactNode`	Element to be rendered in the left side of the input.	-
endContent	`ReactNode`	Element to be rendered in the right side of the input.	-
labelPlacement	`inside` \| `outside` \| `outside-left`	The position of the label.	`inside`
fullWidth	`boolean`	Whether the input should take up the width of its parent.	`true`
isClearable	`boolean`	Whether the input should have a clear button.	`false`
isRequired	`boolean`	Whether user input is required on the input before form submission.	`false`
isReadOnly	`boolean`	Whether the input can be selected but not changed by the user.
isDisabled	`boolean`	Whether the input is disabled.	`false`
isInvalid	`boolean`	Whether the input is invalid.	`false`
baseRef	`RefObject<HTMLDivElement>`	The ref to the base element.	-
validationState	`valid` \| `invalid`	Whether the input should display its "valid" or "invalid" visual styling. (Deprecated) use isInvalid instead.	-
disableAnimation	`boolean`	Whether the input should be animated.	`false`
classNames	`Record<"base"｜ "label"｜ "inputWrapper"｜ "innerWrapper"｜ "mainWrapper" ｜ "input" ｜ "clearButton" ｜ "helperWrapper" ｜ "description" ｜ "errorMessage", string>`	Allows to set custom class names for the Input slots.	-

Input Events

Attribute	Type	Description
onChange	`React.ChangeEvent<HTMLInputElement>`	Handler that is called when the element's value changes. You can pull out the new value by accessing `event.target.value` (string).
onValueChange	`(value: string) => void`	Handler that is called when the element's value changes.
onClear	`() => void`	Handler that is called when the clear button is clicked.

graph TD;
  anchor-input --> anchor-label
  anchor-input --> anchor-icon
  anchor-input --> anchor-tooltip
  anchor-number --> anchor-input
  anchor-phone --> anchor-input
  anchor-quantity --> anchor-input
  anchor-typeahead --> anchor-input
  style anchor-input fill:#f9f,stroke:#333,stroke-width:4px

Installation

Usage

Disabled

Read Only

Required

Help text

Warning

With Error Message

Label Placements

Password Input

Clear Button

Start & End Content

Controlled

Slots

Custom Styles

Custom Implementation

Accessibility

API

Input Props

Input Events

Dependencies

Used by

Depends on

Graph

On this page