Input
A text field: a box, the input inside it and an optional icon.
Usage
Input is the box, Input.Text the native input. The box reacts to hover and focus on its own.
tsx
<Input>
<Input.Text placeholder="search the docs" />
<Input.Icon />
</Input>Icon
Pass your own icon as children. Mount it before the text to put it on the left.
tsx
<Input>
<Input.Icon>
<MdMail />
</Input.Icon>
<Input.Text placeholder="you@domain.com" />
</Input>States
tsx
<Input active>…</Input>
<Input clickable={false}>…</Input>
<Input>
<Input.Text disabled />
</Input>With a label
tsx
<Label spaced htmlFor="email">email</Label>
<Input>
<Input.Text id="email" type="email" />
</Input>More than one line
For multi-line text, use TextArea.
Reference
| prop | type | default | |
|---|---|---|---|
as? | ElementType | "div" | the element or component to render |
active? | boolean | false | keeps the border highlighted; visual only |
clickable? | boolean | true | false makes the whole field inert |
className? | string | — | merged last, so it wins |
…rest | props of as | — | typed against the chosen element |
Input.Text
| prop | type | default | |
|---|---|---|---|
className? | string | — | merged last |
…rest | props of input | — | value, onChange, placeholder, disabled… |
Input.Icon
| prop | type | default | |
|---|---|---|---|
children? | ReactNode | <MdSearch /> | the icon; a lens if you pass none |
className? | string | — | merged last |