# Input

A single-line text field: a well with the control edge as an inset ring, and the focus wake.

Source page: https://sproutboat.com/ikada/components/input

## Installation
```sh
npx shadcn@latest add https://sproutboat.com/ikada/r/input.json
```
Or from the package: `import { Input } from "@sproutboat/ikada";`
## Usage
```tsx
import { Input } from "@/components/ikada/input";

<Input aria-label="Domain" placeholder="robin.sproutboat.app" />
```
## Examples
### Default
Give it a name with a Field label, or aria-label when the context already labels it.
```tsx
<Input aria-label="Domain" placeholder="robin.sproutboat.app" />
```
### Monospace
For ids, keys and hashes.
```tsx
<Input aria-label="Deploy ID" mono defaultValue="dpl_8f3a91c2" />
```
### Invalid
A danger ring and aria-invalid. Prefer the error on a Field, which also announces the message.
```tsx
<Input aria-label="Domain" invalid defaultValue="robin sproutboat" />
```
### Read only

```tsx
<Input aria-label="Region" readOnly defaultValue="eu-west" />
```
### Disabled

```tsx
<Input aria-label="Region" disabled defaultValue="eu-west" />
```
## Props
### InputProps
Also takes every prop of `Omit<ComponentProps<typeof BaseInput>, "className">`.
| Prop | Type | Description |
| --- | --- | --- |
| className? | `string` | Classes merged onto the root element, after ikada's own. |
| invalid? | `boolean` | Marks the field invalid: danger ring and aria-invalid. Prefer the Field error. |
| mono? | `boolean` | Monospace face for ids, keys and hashes. |
| style? | `CSSProperties \| ((state: InputState) => CSSProperties)` | Style applied to the element, or a function that returns a style object based on the component's state. |
| render? | `ReactElement<unknown, string \| JSXElementConstructor<any>> \| ComponentRenderFn<HTMLProps, InputState>` | Allows you to replace the component's HTML element with a different tag, or compose it with another component. Accepts a `ReactElement` or a function that returns the element to render. |
Source: https://github.com/baronunread/ikada/blob/main/src/components/input.tsx