component

Field

props · 18 shown · 18 total

State

  • disabled
    boolean
    default false

    Disables the field: dims it and forwards `disabled` to the control.

  • error
    null string string[]

    Validation error(s). A non-empty value flips the control's `tone` to `danger`, renders the message(s) as a list inside an `alert` live region, and sets `aria-invalid` / `aria-errormessage` on the control.

  • required
    boolean
    default false

    Marks the field as required, rendering a `*` after the label.

Appearance

  • description svelte
    string

    Help text rendered under the control and wired via aria-describedby.

  • label svelte
    string

    Label text shown above (or beside) the control.

  • optionalText
    string

    Optional-hint text shown after the label when the field is NOT required (e.g. "(optional)"). Ignored when `required` is true.

  • size
    "lg" "md" "sm" "xs"
    default "md"

    Size variant, kept in sync with the control's size scale.

  • tone
    "cyan" "danger" "dynamic" "mauve" "neutral" "pink" "primary" "sage" "slate" "stone" "success" "teal" "violet" "warning"

    Explicit tone override for the control. When unset, the field derives `danger` from the presence of an `error`, and otherwise leaves the control's own resting default untouched (e.g. Input `neutral`, Checkbox `primary`).

  • tooltipPlacement svelte
    Placement

    Placement of the label tooltip.

Layout

  • orientation
    "vertical" "horizontal"
    default "vertical"

    Label/control layout direction.

Behavior

  • hasDescription
    boolean

    Whether a description element is rendered — gates the input's `aria-describedby` (an ungated reference dangled on description-less fields). Frameworks set this from their description prop/slot.

  • hasLabel
    boolean

    Whether a visible label is rendered. When true (and an `id` is set), the connect seeds a label id and associates the control via `aria-labelledby`. Frameworks set this when label content is provided.

  • hasTooltip
    boolean

    Whether a label tooltip trigger is rendered, so the connect emits its styling bag. Frameworks set this when a tooltip is provided.

  • id
    string

    Stable id linking the `<label for>` to the control and seeding the `aria-describedby` / `aria-errormessage` ids. Frameworks generate one when the consumer doesn't pass it. When absent, the label/describedby wiring is omitted (the field still renders).

Slots

  • control required slot svelte
    Snippet<[FieldControlProps]>

    Render-prop for the control — receives the props bag to spread onto it.

  • labelTooltip slot svelte
    string Snippet

    Tooltip attached to a small info trigger next to the label.

Advanced

  • passThrough
    FieldPassThrough

    Per-slot escape hatch for custom styling and props.

  • reactive
    boolean
    default false

    Astro / vanilla: serialize the props into `data-field-config` so the client runtime hydrates this instance and `getPindoba(el, "field")` can `update()` it. Frameworks with their own reactivity don't need it.

Type

  • Components
  • Blocks