# Input

Input component enables the user to interact with and input content and data.
The form input allows you to create various text style inputs such as `text`,
`password`, `email`, `number`, `url`, `search` and more.

## Import

```js
import { Input } from "@blockstack/ui";
```

## Usage

Here's a basic usage of the Input component.

```jsx
<Input placeholder="Basic usage" />
```

```jsx
<>
  <FormLabel mb="8px">Simple Label</FormLabel>
  <Input placeholder="Basic usage" aria-invalid="true" />
</>
```

### Controlled Input

```jsx
function Example() {
  const [value, setValue] = React.useState("");
  const handleChange = event => setValue(event.target.value);

  return (
    <>
      <FormLabel mb="8px">Value: {value}</FormLabel>
      <Input
        value={value}
        onChange={handleChange}
        placeholder="Here is a sample placeholder"
      />
    </>
  );
}
```

## Props

The Input component composes [PseudoBox](/pseudobox) so you can pass all `PseudoBox` props,
and `React.InputHTMLAttributes`.

| Name               | Type                                       | Default   | Description                                                                                                                           |
| ------------------ | ------------------------------------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| `as`               | `React.ElementType`                        |           | The component to use in place of `input`.                                                                                             |
| `aria-label`       | `string`                                   |           | Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.                 |
| `aria-describedby` | `string`                                   |           | Accessibility label to use, in scenarios where the input has no visible label. A11y: It's usefult for screen readers.                 |
| `isDisabled`       | `boolean`                                  | `false`   | If `true`, the input will be disabled. This sets `aria-disabled=true` and you can style this state by passing `_disabled` prop.       |
| `isInvalid`        | `boolean`                                  | `false`   | If `true`, the `input` will indicate an error. This sets `aria-invalid=true` and you can style this state by passing `_invalid` prop. |
| `isRequired`       | `boolean`                                  | `false`   | If `true`, the input element will be required.                                                                                        |
| `isFullWidth`      | `boolean`                                  | `false`   | If `true`, the input element will span the full width of it's parent.                                                                 |
| `isReadOnly`       | `boolean`                                  | `false`   | If `true`, prevents the value of the input from being edited.                                                                         |
| `size`             | `sm`, `md`, `lg`                           | `md`      | The visual size of the `input` element.                                                                                               |
| `variant`          | `outline`, `unstyled`, `flushed`, `filled` | `outline` | The variant of the input style to use.                                                                                                |
