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.whatwg.com.cn/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://mdn.org.cn/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

名称	类型	描述
defaultValue	unknown	默认值。当组件不受控制时使用。
disabled	boolean	如果为 `true`，则组件被禁用。该 prop 默认为从父 FormControl 组件继承的值 (`false`)。
error	boolean	如果为 `true`，则 `input` 将通过设置 `aria-invalid` 属性来指示错误。该 prop 默认为从父 FormControl 组件继承的值 (`false`)。
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	如果为 `true`，则 `input` 元素为必填项。该 prop 默认为从父 FormControl 组件继承的值 (`false`)。
value	unknown

名称	类型	描述
disabled	boolean	如果为 `true`，则组件将被禁用。
error	boolean	如果为 `true`，则 `input` 将通过设置 `aria-invalid` 属性来指示错误。
focused	boolean	如果为 `true`，则 `input` 将被聚焦。
formControlContext	FormControlState \| undefined	从 `useFormControlContext` hook 返回的值。
getInputProps	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputInputSlotProps<ExternalProps>	input slot 的 props 的解析器。
getRootProps	<ExternalProps extends Record<string, any> = {}>(externalProps?: ExternalProps) => UseInputRootSlotProps<ExternalProps>	root slot 的 props 的解析器。
inputRef	React.RefCallback<HTMLInputElement \| HTMLTextAreaElement> \| null
required	boolean	如果为 `true`，则 `input` 将指示它是必填项。
value	unknown	`input` 元素的 `value`。

输入框

useInput API

导入

参数

返回值