Class name applied to {{nodeName}} if {{conditions}}.

State class applied to {{nodeName}} if {{conditions}}.

This prop helps users to fill forms faster, especially on mobile devices. The name can be confusing, as it&#39;s more like an autofill. You can learn more about it <a href="https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill">following the specification</a>.

If <code>true</code>, the <code>input</code> element is focused during the first mount.

The default value. Use when the component is not controlled.

If <code>true</code>, the component is disabled. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute on the input and the <code>baseui--error</code> class on the root element. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

The id of the <code>input</code> element.

Maximum number of rows to display when multiline option is set to true.

Minimum number of rows to display when multiline option is set to true.

If <code>true</code>, a <code>textarea</code> element is rendered.

Name attribute of the <code>input</code> element.

The short hint displayed in the <code>input</code> before the user enters a value.

It prevents the user from changing the value of the field (not from interacting with the field).

If <code>true</code>, the <code>input</code> element is required. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

Number of rows to display when multiline option is set to true.

The props used for each slot inside the Input.

The components used for each slot inside the InputBase. Either a string to use a HTML element or a component.

Type of the <code>input</code> element. It should be <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#Form_%3Cinput%3E_types">a valid HTML5 input type</a>.

The value of the <code>input</code> element, required for a controlled component.

Class name applied to the root element if `endAdornment` is provided.

Class name applied to the root element if `startAdornment` is provided.

State class applied to the root element if `disabled={true}`.

State class applied to the root element if `error={true}`.

State class applied to the root element if the component is focused.

Class name applied to the root element if the component is a descendant of `FormControl`.

Class name applied to the input element if `multiline={true}`.

Class name applied to the input element if `type="search"`.

Class name applied to the root element if `multiline={true}`.

Input

string

bool

node

number

{ input?: func &#124;&nbsp;object, root?: func &#124;&nbsp;object }

shape

{ input?: elementType, root?: elementType, textarea?: elementType }

'button' &#124;&nbsp;'checkbox' &#124;&nbsp;'color' &#124;&nbsp;'date' &#124;&nbsp;'datetime-local' &#124;&nbsp;'email' &#124;&nbsp;'file' &#124;&nbsp;'hidden' &#124;&nbsp;'image' &#124;&nbsp;'month' &#124;&nbsp;'number' &#124;&nbsp;'password' &#124;&nbsp;'radio' &#124;&nbsp;'range' &#124;&nbsp;'reset' &#124;&nbsp;'search' &#124;&nbsp;'submit' &#124;&nbsp;'tel' &#124;&nbsp;'text' &#124;&nbsp;'time' &#124;&nbsp;'url' &#124;&nbsp;'week'

enum

root

input

textarea

If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute. The prop defaults to the value (<code>false</code>) inherited from the parent FormControl component.

If <code>true</code>, the component will be disabled.

If <code>true</code>, the <code>input</code> will indicate an error by setting the <code>aria-invalid</code> attribute.

If <code>true</code>, the <code>input</code> will be focused.

Return value from the <code>useFormControlContext</code> hook.

If <code>true</code>, the <code>input</code> will indicate that it&#39;s required.

The <code>value</code> of the <code>input</code> element.

useInput

unknown

boolean

React.Ref&lt;HTMLInputElement | HTMLTextAreaElement&gt;

React.FocusEventHandler&lt;HTMLInputElement | HTMLTextAreaElement&gt;

React.ChangeEventHandler&lt;HTMLInputElement | HTMLTextAreaElement&gt;

React.MouseEventHandler

FormControlState | undefined

&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseInputInputSlotProps&lt;ExternalProps&gt;

&lt;ExternalProps extends Record&lt;string, any&gt; = {}&gt;(externalProps?: ExternalProps) =&gt; UseInputRootSlotProps&lt;ExternalProps&gt;

React.RefCallback&lt;HTMLInputElement | HTMLTextAreaElement&gt; | null

Name	Type	Description
defaultValue	unknown	The default value. Use when the component is not controlled.
disabled	boolean	If `true`, the component is disabled. The prop defaults to the value (`false`) inherited from the parent FormControl component.
error	boolean	If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute. The prop defaults to the value (`false`) inherited from the parent FormControl component.
inputRef	React.Ref<HTMLInputElement \| HTMLTextAreaElement>
onBlur	React.FocusEventHandler<HTMLInputElement \| HTMLTextAreaElement>
onChange	React.ChangeEventHandler<HTMLInputElement \| HTMLTextAreaElement>
onClick	React.MouseEventHandler
onFocus	React.FocusEventHandler<HTMLInputElement \| HTMLTextAreaElement>
required	boolean	If `true`, the `input` element is required. The prop defaults to the value (`false`) inherited from the parent FormControl component.
value	unknown

Name	Type	Description
disabled	boolean	If `true`, the component will be disabled.
error	boolean	If `true`, the `input` will indicate an error by setting the `aria-invalid` attribute.
focused	boolean	If `true`, the `input` will be focused.
formControlContext	FormControlState \| undefined	Return value from the `useFormControlContext` hook.
getInputProps	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputInputSlotProps<ExternalProps>	Resolver for the input slot's props.
getRootProps	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputRootSlotProps<ExternalProps>	Resolver for the root slot's props.
inputRef	React.RefCallback<HTMLInputElement \| HTMLTextAreaElement> \| null
required	boolean	If `true`, the `input` will indicate that it's required.
value	unknown	The `value` of the `input` element.

Input

useInput API

Import

Parameters

Return value