universal input

Root

<UniversalInput shape size innerFit radius>

Horizontal layout: outer slots + field. Owns the tokens.

Field

<Field>

The bordered container. Single row, or expanded with boxes.

Row

<Row> · auto

Fixed-height input row. Added for you if you skip it.

Inner

<Inner position fit width>

Slot inside the border. flush = full-bleed, inset = bare, padded = filled chip (radius = field − padding); width auto hugs text.

Outer

<Outer fit width>

Detached slot outside the border. Fixed width; full field height on single-row fields, row height AND row-docked when expanded; fit forces square/circle, width auto hugs text.

Top / Bottom

<Top> <Bottom>

Expansion boxes inside the border. Grow the field vertically.

Input

<Input>

The native text field. Takes any input props.

Annotation

<Annotation>

Floating label in a Spot. plain text, pill ring, or sketch marker.

Above / Below

<Above> <Below>

Annotation rows docked to the field column. Aligned with or without outers.

Fit

flush / inset / padded

How an Inner sits: full-bleed cell, bare content, or filled chip with radius = field − padding.

Spot

above/below × leading/center/trailing

The six named positions around a field.

<UniversalInput shape="straight" size="md" innerFit="flush">
  <UniversalInput.Outer label="filters" onClick={…}>
    <SlidersHorizontal />
  </UniversalInput.Outer>
  <UniversalInput.Field>
    <UniversalInput.Inner position="leading">
      <Search />
    </UniversalInput.Inner>
    <UniversalInput.Input placeholder="Search…" />
    <UniversalInput.Inner position="trailing" fit="inset" onClick={…}>
      <Mic />
    </UniversalInput.Inner>
  </UniversalInput.Field>
  <UniversalInput.Outer label="send" onClick={…}>
    <Send />
  </UniversalInput.Outer>
</UniversalInput>

boxes — any height, any content

Top and Bottom boxes live inside the field border and expand its height. Switch each one — the field grows and shrinks around whatever you put in: a tall map, a file strip, a slim notice, a toolbar, a caption, or nothing at all.

• Unpadded by default

  Padding is yours (p-2, px-3…). Dividers draw themselves.

• Height from content

  Auto by default; pin it with h-* or cap it with max-h-* + overflow.

• Compose freely

  Top, Row, Bottom — keep any of them, drop any of them, swap contents live.