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

名稱	類型	描述
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

Import

參數

回傳值