---
title: Input
category: Forms
summary: Composes [Input.InputBox](/input.inputbox) and [Input.InputField](/input.inputfield).
---

```jsx live
const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} />
    ))}
  </GridView>
))
```

```jsx live
const sizes = ['xs', 'sm', 'md', 'lg']
render(() => (
  <GridView width="100%" columns="repeat(4, 1fr)" alignment="start" spacing={2}>
    {sizes.map((size, index) => (
      <Input key={size} size={size} defaultValue={`Input ${size}`} subdued />
    ))}
  </GridView>
))
```

## Props

---

Accepts props for [Input.InputBox](/input.inputbox) _and_ [Input.InputField](/input.inputfield), remaining props are forwarded to `Input.InputBox`.