SensitiveInput

Secrets masked by default, an eye to reveal, mono when revealed, never autocompleted.

View source

Only the last four characters stay visible after saving.

import { SensitiveInput } from "@logicplanes/kaeso-ui";

Props

  • align
    "start" | "end"

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

  • defaultRevealed
    boolean = false

    Start revealed.

  • 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.

  • kind
    "password" | "secret" = secret

    A password (never revealed once saved) or a secret such as an API key.

  • 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"

    The height of the input.

  • suffix
    ReactNode

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