Input

A native input element that automatically works with Field.

View as Markdown

Anatomy

Import the component and use it as a single part:

Anatomy

API reference

defaultValue

Union

Type

string | number | string[]

onValueChange

function

Description

Callback fired when the value changes. Use when controlled.

Type

((value: string, event: Event) => void)

className

string | function

Description

CSS class applied to the element, or a function that returns a class based on the component’s state.

Type

| string
| ((state: Input.State) => string)

render

ReactElement | function

Name
Description

Allows you to replace the component’s HTML element with a different tag, or compose it with another component.

Accepts a ReactElement or a function that returns the element to render.

Type

| ReactElement
| ((props: HTMLProps, state: Input.State) => ReactElement)

data-disabled

Present when the input is disabled.

data-valid

Present when the input is in valid state.

data-invalid

Present when the input is in invalid state.

data-dirty

Present when the input's value has changed.

data-touched

Present when the input has been touched.

data-filled

Present when the input is filled.

data-focused

Present when the input is focused.