Sorry, but you either have no stories or none are selected somehow.
If the problem persists, check the browser console, or the terminal you've run Storybook from.
⚠️ Preview components are considered unstable:
- Features and APIs may change before final release
- Please contact us if you intend to use this in your product
| Name | Description | Default | Control |
|---|---|---|---|
| input | The actual This is the "primary" slot, so native props specified directly on the ShorthandProps<{ as?: "input"; } & Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; } & { ...; }> | - | |
| 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 The root slot receives the ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - | |
| contentBefore | Element before the input text, within the input border ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - | |
| contentAfter | Element after the input text, within the input border ShorthandProps<{ as?: "span"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }> | - | |
| size | Size of the input (changes the font size and spacing). "small""medium""large" | "'medium'" | |
| inline | If true, the input will have inline display, allowing it be used within text content. If false (the default), the input will have block display. boolean | - | |
| appearance | Controls the colors and borders of the input. "outline""underline""filledDarker""filledLighter" | "'outline'" | |
| defaultValue | Default value of the input. Provide this if the input should be an uncontrolled component
which tracks its current state internally; otherwise, use (This prop is mutually exclusive with string | - | |
| value | Current value of the input. Provide this if the input is a controlled component where you
are maintaining its current state; otherwise, use (This prop is mutually exclusive with string | - | |
| onChange | Called when the user changes the input's value. ((ev: FormEvent<HTMLInputElement>, data: InputOnChangeData) => void) | - | - |
| 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 "number""time""text""tel""url""email""search""date" | "'text'" | |
| 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 | - | |
| disabled | Whether the input is disabled boolean | - |
An input can have visual content (such as an icon) before or after the entered text, within the input border.
An input can be rendered inline with text.
An input can have placeholder text. If using the placeholder as a label (which is not recommended for usability), be sure to provide an aria-label for screen reader users.
An input can have a custom text-based type such as email, url, or password 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.
An input can be uncontrolled: it's passed a default value and handles updates internally.
An input can be controlled: the consuming component tracks the input's value in its state and manually handles all updates.