Field

A label, a control and its help, wired together; errors are toasts, never text under the field.

New key

Applications use this key to call the gateway.

Name

Shown in logs and the audit log.

ExpiresOptional

<Fieldset legend="New key" description="Applications use this key to call the gateway." className="w-400">
      <Field label="Name" description="Shown in logs and the audit log.">
        <Input placeholder="checkout-web" />
      </Field>
      <Field label="Expires" optional>
        <Select
          options={[
            { value: "never", label: "Never" },
            { value: "30", label: "In 30 days" },
            { value: "90", label: "In 90 days" },
          ]}
          defaultValue="90"
        />
      </Field>
    </Fieldset>

import { Field, Fieldset } from "@logicplanes/kaeso-ui";

Props

description
ReactNode
One sentence of help under the label.
error
ReactNode
The error message: it marks the field invalid and is read out with the description, but isn't drawn under the field, so show it in a toast too.
id
string
The id of the control inside, so the label points to it.
invalid
boolean
Marks the field invalid without a message.
label
ReactNode
The field's label.
required
boolean = false
Marks the field as required.