<Input type="email" placeholder="contact@example.com" />Everything goes to the underlying <input>, aria-invalid included — that is
what draws the error ring, so wire it to your validation state rather than
adding a class.
For a label, description and error around it, use Field.
API
| Prop | Type | Default | |
|---|---|---|---|
className | string | ((state: InputState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | string | number | readonly string[] | — | The default value of the input. Use when uncontrolled. |
onValueChange | ((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Callback fired when the value changes. Use when controlled. |
render | ComponentRenderFn<HTMLProps, InputState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | 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. |
style | CSSProperties | ((state: InputState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | string | number | readonly string[] | — | The value of the input. Use when controlled. |
Plus the DOM props of the element it renders. Source: input/components/input.tsx.