Input Preview

An input allows people to enter short, free-form text data.

If you need to collect more than one line of information, try a textarea.

Loading...
Open in CodeSandbox
Input storybook
React guidance

Properties

appearance

Controls the colors and borders of the input.

“outline” “underline” “filled-darker” “filled-lighter” “filled-darker-shadow” “filled-lighter-shadow”
Default:
“‘outline’\n\nNote: ‘filled-darker-shadow’ and ‘filled-lighter-shadow’ are deprecated and will be removed in the future.”

contentAfter

Element after the input text, within the input border

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

contentBefore

Element before the input text, within the input border

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | null
Default:
none

defaultValue

Default value of the input. Provide this if the input should be an uncontrolled component which tracks its current state internally; otherwise, use value .

(This prop is mutually exclusive with value .)

string
Default:
none

disabled

Whether the input is disabled

boolean
Default:
none

input

The actual <input> element. type=“text” will be automatically applied unless overridden.

This is the “primary” slot, so native props specified directly on the <Input> will go here (except className and style , which go to the root slot). The top-level ref will also go here.

({ as?: "input"; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; }, "children"> & { ...; })
Default:
none

onChange

Called when the user changes the input’s value.

((ev: ChangeEvent<HTMLInputElement>, data: InputOnChangeData) => void)
Default:
none

placeholder

Placeholder text for the input. If using this instead of a label (which is not recommended), be sure to provide an aria-label for screen reader users.

string
Default:
none

root

Wrapper element which visually appears to be the input and is used for borders, focus styling, etc. (A wrapper is needed to properly position contentBefore and contentAfter relative to input .)

The root slot receives the className and style specified directly on the <Input> . All other top-level native props will be applied to the primary slot, input .

WithSlotShorthandValue<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

size

Size of the input (changes the font size and spacing).

“small” “medium” “large”
Default:
“‘medium’”

type

An input can have different text-based types based on the type of value the user will enter.

Note that no custom styling is currently applied for alternative types, and some types may activate browser-default styling which does not match the Fluent design language.

(For non-text-based types such as button or checkbox , use the appropriate component or an <input> element instead.)

“number” “time” “text” “search” “tel” “url” “email” “date” “datetime-local” “month” “password” “week”
Default:
“‘text’”

value

Current value of the input. Provide this if the input is a controlled component where you are maintaining its current state; otherwise, use defaultValue.

(This prop is mutually exclusive with defaultValue .)

string
Default:
none