Input

A pill text field with the secondary material and a soft focus halo.

View source
import { Input } from "@logicplanes/kaeso-ui";

Props

  • align
    "start" | "end"

    Text alignment of the value; numbers align to the end with tabular digits.

  • description
    ReactNode

    One sentence of help under the label.

  • invalid
    boolean

    Shows it as invalid; pair it with a message that says what to fix.

  • label
    ReactNode

    The visible label.

  • layout
    "horizontal" | "vertical"

    The label above the control (vertical) or beside it (horizontal).

  • leadingIcon
    IconSvgElement

    An icon before the text.

  • optional
    boolean

    Adds “Optional” to the label, for forms where most fields are required.

  • prefix
    ReactNode

    Text before the value: "https://".

  • size
    "md" | "sm" | "lg" | "xl" = sm

    The height of the input.

  • suffix
    ReactNode

    Text after the value: "USD", "/ min".

  • trailing
    ReactNode

    Any trailing element (a button, a Kbd).