Input

Usage

Import

import { Input } from "@govtechmy/myds-react/input";

Anatomy

<Input />

Examples

Size

Use the size prop to change the size of the input. The default size is small.

Disabled

Disable the input by setting the disabled prop to true.

Uncontrolled vs Controlled State

To use the input in an uncontrolled state, set the defaultValue prop to the initial state of the input.

To use the input in the controlled state, utilize the value and onChange prop to handle the state programmatically.

Input Icon

You can add an icon to the input field by using the InputIcon component. The icon can be positioned on the left or right side of the input field. Both left and right icons can be used together.

You can add an addon to the input field by using the InputAddon component. The addon can be appended or prepended to the input field. This is useful for attaching submit buttons, currency symbols or any other control to the input field.