component

Input

props · 29 shown · 29 total

InputRoot

Appearance

  • background
    "transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"
    default surface.ground

    Background surface variant for the input.

  • border
    "none" "default" "bold" "muted" "accent"
    default default

    Border variant for the input wrapper.

  • radius
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Corner radius override. Without it the corner follows the size tier (`control.<size>`). `inner` renders a concentric corner computed from the nearest parent panel (parent radius − parent padding, floored at `2xs`).

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

    Size variant. All sizes share the same height system as buttons (`xs`, `sm`, `md`, `lg`).

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

    Semantic tone color scheme used to indicate validation state or context. `neutral` is the default, `primary` uses the primary color, `success` green, `danger` red, and `warning` orange.

Layout

  • fullWidth
    boolean

    When true, the input stretches to fill the available width of its container.

  • radiusBottom
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the bottom-left and bottom-right corners.

  • radiusLeft
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the top-left and bottom-left corners.

  • radiusRight
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the top-right and bottom-right corners.

  • radiusTop
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the top-left and top-right corners. Overrides `radius` on those corners only (flush-edge chains).

Advanced

  • passThrough
    Pick<InputPassThrough<RootElementAttributes>, "root">

    Per-slot escape hatch for custom styling and props on the wrapper.

InputField

Behavior

  • type
    string
    default "text"

    HTML input type for the `<input>` element (e.g. `text`, `search`, `number`, `email`, `password`, `tel`, `url`).

Advanced

  • passThrough
    { root?: InputSlotPassThrough<InputElementAttributes> }

    Per-slot escape hatch for custom styling and props on the `<input>`.

Input

State

  • value svelte
    string

    Bindable current value of the input.

Appearance

  • background
    "transparent" "surface.peak" "surface.hill" "surface.base" "surface.valley" "surface.ground"
    default surface.ground

    Background surface variant for the input.

  • border
    "none" "default" "bold" "muted" "accent"
    default default

    Border variant for the input wrapper.

  • radius
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Corner radius override. Without it the corner follows the size tier (`control.<size>`). `inner` renders a concentric corner computed from the nearest parent panel (parent radius − parent padding, floored at `2xs`).

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

    Size variant. All sizes share the same height system as buttons (`xs`, `sm`, `md`, `lg`).

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

    Semantic tone color scheme used to indicate validation state or context. `neutral` is the default, `primary` uses the primary color, `success` green, `danger` red, and `warning` orange.

Layout

  • fullWidth
    boolean

    When true, the input stretches to fill the available width of its container.

  • radiusBottom
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the bottom-left and bottom-right corners.

  • radiusLeft
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the top-left and bottom-left corners.

  • radiusRight
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the top-right and bottom-right corners.

  • radiusTop
    "inherit" "lg" "md" "sm" "xs" "none" "2xl" "xl" "inner" "2xs" "3xl" "4xl" "5xl" "6xl" "full"

    Border radius for the top-left and top-right corners. Overrides `radius` on those corners only (flush-edge chains).

Behavior

  • type svelte
    "text" "search" "number" "email" "password" "tel" "url"

    HTML input type for the `<input>` element (e.g. `text`, `search`, `number`, `email`, `password`, `tel`, `url`).

Slots

  • leading slot svelte
    Snippet

    Leading addon content (icon/badge), rendered inside an affix box the Control Var Contract aligns. Pass a `<Stamp emphasis="ghost">` for icons; style the box via `passThrough.leading`.

  • trailing slot svelte
    Snippet

    Trailing addon content, rendered inside an end-pinned affix box.

Advanced

  • element binding svelte
    HTMLInputElement null

    Bound reference to the inner `<input>` element (`bind:this`).

  • passThrough
    InputPassThrough<RootElementAttributes, InputElementAttributes>

    Per-slot escape hatch for custom styling and props. Each slot accepts a Panda CSS `style` object and a `props` bag of arbitrary HTML attributes.

Plus all standard <input> HTML attributes.

Type

  • Components
  • Blocks