0.22.1

Theme Switcher

Input

Fundamental component for inputs.

Validation States:

import { Input } from "@ngrok/mantle/input";

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, MagnifyingGlass } from "@phosphor-icons/react";

API Reference

The Input accepts the following props in addition to the standard HTML input attributes.

PropTypeDefaultDescription

validation

  • error
  • success
  • warning
  • false
  • () => "error" | "success" | "warning" | false
—

Use the validation prop to show if the input has a specific validation status. This will change the border and outline of the input.

The false type is useful when using short-circuiting logic so that you don't need to use a ternary with undefined.

Setting validation to error also sets aria-invalid.