Input
Fundamental component for inputs.
Validation States:
import { Input } from "@ngrok/mantle/input";
<Input placeholder="Enter a username" />
<Input placeholder="Enter a username" validation="error" />
<Input placeholder="Enter a username" validation="success" />
<Input placeholder="Enter a username" validation="warning" />Composition
You can compose additional visual or functional elements within the Input using children. The examples below show you how to render start and end icons or buttons. The Password Input is built using this API under the hood! Keep in mind that you will need to manually pass the InputCapture component as children too because it is responsible for rendering the actual form input element! We provide an InputCapture component for you when you don't use the children API.
Note: when composing with interactive content (e.g. a button), you will need to consider whether or not that element should be tab-indexable or receive focus!
import { Input, InputCapture } from "@ngrok/mantle/input";
import { Label } from "@ngrok/mantle/label";
import { Info } from "@phosphor-icons/react/Info";
import { MagnifyingGlass } from "@phosphor-icons/react/MagnifyingGlass";
<Label className="block w-full max-w-80 space-y-1">
<p>Search with start icon</p>
<Input className="max-w-64" placeholder="Search...">
<MagnifyingGlass />
<InputCapture />
</Input>
</Label>
<Label className="block w-full max-w-80 space-y-1">
<p>Search with end icon</p>
<Input className="max-w-64" placeholder="Search...">
<InputCapture />
<Info />
</Input>
</Label>
<Label className="block w-full max-w-80 space-y-1">
<p>Search with start and end icons</p>
<Input className="max-w-64" placeholder="Search...">
<MagnifyingGlass />
<InputCapture />
<Info />
</Input>
</Label>
<Label className="block w-full max-w-80 space-y-1">
<p>Search with start icon (error)</p>
<Input className="max-w-64" placeholder="Search..." validation="error">
<MagnifyingGlass />
<InputCapture />
</Input>
</Label>
<Label className="block w-full max-w-80 space-y-1">
<p>Search with end icon (error)</p>
<Input className="max-w-64" placeholder="Search..." validation="error">
<InputCapture />
<Info />
</Input>
</Label>
<Label className="block w-full max-w-80 space-y-1">
<p>Search with start and end icons (error)</p>
<Input className="max-w-64" validation="error" placeholder="Search...">
<MagnifyingGlass />
<InputCapture />
<Info />
</Input>
</Label>API Reference
The Input accepts the following props in addition to the standard HTML input attributes.