<input>

<input />

• Reference
  • <input>
• Usage
  • Displaying inputs of different types
  • Providing a label for an input
  • Providing an initial value for an input
  • Reading the input values when submitting a form
  • Controlling an input with a state variable
  • Optimizing re-rendering on every keystroke
• Troubleshooting
  • My text input doesn’t update when I type into it
  • My checkbox doesn’t update when I click on it
  • My input caret jumps to the beginning on every keystroke
  • I’m getting an error: “A component is changing an uncontrolled input to be controlled”

Reference

<input>

To display an input, render the built-in browser <input> component.

<input name="myInput" />

See more examples below.

Props

<input> supports all common element props.

You can make an input controlled by passing one of these props:

• checked: A boolean. For a checkbox input or a radio button, controls whether it is selected.
• value: A string. For a text input, controls its text. (For a radio button, specifies its form data.)

When you pass either of them, you must also pass an onChange handler that updates the passed value.

These <input> props are only relevant for uncontrolled inputs:

• defaultChecked: A boolean. Specifies the initial value for type="checkbox" and type="radio" inputs.
• defaultValue: A string. Specifies the initial value for a text input.

These <input> props are relevant both for uncontrolled and controlled inputs:

• accept: A string. Specifies which filetypes are accepted by a type="file" input.
• alt: A string. Specifies the alternative image text for a type="image" input.
• capture: A string. Specifies the media (microphone, video, or camera) captured by a type="file" input.
• autoComplete: A string. Specifies one of the possible autocomplete behaviors.
• autoFocus: A boolean. If true, React will focus the element on mount.
• dirname: A string. Specifies the form field name for the element’s directionality.
• disabled: A boolean. If true, the input will not be interactive and will appear dimmed.
• children: <input> does not accept children.
• form: A string. Specifies the id of the <form> this input belongs to. If omitted, it’s the closest parent form.
• formAction: A string. Overrides the parent <form action> for type="submit" and type="image".
• formEnctype: A string. Overrides the parent <form enctype> for type="submit" and type="image".
• formMethod: A string. Overrides the parent <form method> for type="submit" and type="image".
• formNoValidate: A string. Overrides the parent