Input

Text field with an optional leading icon and pill/rounded shape. Powers the toolbar search, form fields (login/settings), and the Home hero prompt (pill + trailing action).

Selector: tip-input

API

Name	Type	Default	Description
`value` (input)	`string`	`''`	Controlled value.
`placeholder` (input)	`string`	`''`	Native placeholder.
`icon` (input)	`string \| undefined`	`undefined`	Leading `tip-icon` name (e.g. `"search"`).
`shape` (input)	`InputShape` = `'rounded' \| 'pill'`	`'rounded'`	`pill` used by the hero prompt.
`size` (input)	`Size` = `'sm' \| 'md' \| 'lg'`	`'md'`	Height + font-size preset.
`disabled` (input)	`boolean`	`false`	Disables the field, dims background.
`loading` (input)	`boolean`	`false`	Renders a `tip-skeleton` in place of the field.
`type` (input)	`'text'\|'email'\|'password'\|'search'\|'tel'\|'url'`	`'text'`	Native input `type`.
`label` (input)	`string \| undefined`	`undefined`	Optional label rendered above, linked via `for`/`inputId`.
`inputId` (input)	`string \| undefined`	`undefined`	`id` for the native input, for an external/own `<label for>`.
`autocomplete` (input)	`string \| undefined`	`undefined`	Native `autocomplete` hint (`"email"`, `"current-password"`, …).
`valueChange` (output)	`string`	—	Emitted on every native `input` event.
`[trailing]` (slot)	content	—	Trailing action (e.g. the hero's "Generate" button).

Usage

<tip-input
  shape="pill" size="lg" icon="link"
  [placeholder]="heroPlaceholder"
  [value]="heroPrompt()" (valueChange)="heroPrompt.set($event)"
>
  <tip-button trailing shape="pill" (clicked)="generate()">Generate</tip-button>
</tip-input>

Notes

Focus state applies --border-focus + --ring-focus (emerald ring); pill shape additionally uses --shadow-md at rest (heavier than rounded's --shadow-xs).
label/inputId are optional — auth screens set both to wire an accessible label; toolbar search fields typically omit both and rely on placeholder + icon.
No built-in debounce — valueChange fires on every keystroke; callers needing debounced search should manage that in the consuming service/component.