Skip to content
zits/ui

Input Group

Overview

Section titled “Overview”

Input Group is a three-part composite: ZitsInputGroup (a bordered flex row that owns the border, ring, and focus seam), ZitsInputGroupAddon (a leading/trailing icon or text slot), and ZitsInputGroupInput (a borderless, shadowless native <input> that fills the row so the border seam between addon and input is invisible). There is no Navius primitive underneath.

Install

Section titled “Install”
Terminal window
navius add input-group --to ./src/MyApp --namespace MyApp.Ui

Usage

Section titled “Usage”
<ZitsInputGroup>
    <ZitsInputGroupAddon>
        <SearchIcon />
    </ZitsInputGroupAddon>
    <ZitsInputGroupInput type="search" placeholder="Search..." />
</ZitsInputGroup>

Parts and props

Section titled “Parts and props”

No bespoke props: ZitsInputGroup and ZitsInputGroupAddon render a div and take ChildContent; ZitsInputGroupInput renders a native input. All three splat unmatched attributes (including type, placeholder, value, and class).

Styling surface

Section titled “Styling surface”

All three parts accept Attributes, merged via Cn.Class with the caller’s classes applied last. There are no variant/size parameters; the border/ring/focus treatment lives entirely on ZitsInputGroup, and ZitsInputGroupInput deliberately strips its own border, shadow, and focus ring so the group appears as a single control.

Data attribute hooks

Section titled “Data attribute hooks”

Input Group emits no data-* state hooks; has-[input:disabled]: on the group reacts to the native disabled attribute of a descendant input, not a data-* attribute.

Input Group wires no ARIA role of its own: it forwards whatever native input attributes (type, aria-*, disabled, etc.) the caller supplies to ZitsInputGroupInput’s underlying <input> element.