Controls the appearance of the field. Subtle shows styling on hover. None prevents all field styling. Take care when using the none appearance as this doesn't include accessible interactions.

Class name to apply to the input element.

Element after input in text field.

Element before input in text field.

Applies compact styling, making the field smaller.

Sets the field as to appear disabled, people will not be able to interact with the text field and it won't appear in the focus order. Wherever possible, prefer using validation and error messaging over disabled fields for a more accessible experience.

Changes the text field to have a border indicating that its value is invalid.

Sets content text value to appear monospaced.

If true, prevents the value of the input from being edited.

Set required for form that the field is part of.

Name of the input element.

Handler called when the inputs value changes.

Handler called when the mouse down event is triggered on the input element.

Placeholder text to display in the text field whenever it is empty.

Allows getting a ref to the component instance. Once the component unmounts, React will set ref.current to null (or call the ref with null if you passed a callback ref).

@see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs}

A testId prop is provided for specified elements, which is a unique string that appears as a data attribute data-testid in the rendered code, serving as a hook for automated tests.

Sets maximum width of input.