Text input

One line of text, with room at either end for a mark or an affix. The plainest field in the library, and the one the others are shaped like.

Last name

As it appears on your card.

<Input
  size="md"
  label="Last name"
  required
  info="We only use this on your invoices."
  leading={<UserIcon />}
  trailing={<SearchIcon size={20} />}
  hint="As it appears on your card."
/>

Slots

Four, and the pairing is deliberate. leading and trailing take a mark: an icon, a spinner, a button. prefix and suffix take text that is read as part of the value: a currency symbol, a protocol, a unit. They are separate props because the design spaces them differently. An affix sits 12px in from the edge with 14px to the value, because it belongs to the value rather than sitting beside it.

billing-form.tsx

import { Input } from 'yote-ui'

<Input label="Website" prefix="https://" placeholder="billia.io" />
<Input label="Amount" prefix="$" suffix="USD" />
<Input label="Search" leading={<SearchIcon />} />

Nothing is rendered for a slot you leave unset, so the field collapses to a plain box with no stray padding. The gap belongs to the slot, not to the field.

Sizes

Only sm is drawn in Figma. The other two follow the ramp the password field already set, so a form mixing fields lines up rather than each component inventing its own scale.

size	Radius	Padding	Notes
`sm`	8px	8px	Figma 6:508. The only measured one.
`md`	12px	10px	The default.
`lg`	12px	12px

Props

Prop	Type	Default	Notes
`leading`	ReactNode	—	A mark at the start of the field. 20px in the frame.
`trailing`	ReactNode	—	A mark at the end. Also where an inline selector goes.
`prefix`	ReactNode	—	Text at the start, inside the field.
`suffix`	ReactNode	—	Text at the end, inside the field.
`required`	boolean	false	Renders the asterisk and sets aria-required.
`optional`	boolean	false	Renders the muted "(Optional)" note.
`info`	string	—	Info marker beside the label, with this as its tooltip.

Shared

Prop	Type	Default	Notes
`value`	string	—	Controlled value.
`defaultValue`	string	—	Initial value when uncontrolled.
`onChange`	(value: string) => void	—	Receives the value, never the event.
`label`	ReactNode	—	Rendered as a real <label> wired by htmlFor.
`hint`	ReactNode	—	Helper text under the field.
`error`	ReactNode	—	Error text. Implies invalid unless invalid says otherwise.
`invalid`	boolean	—	Forces the error styling on or off.
`errorKey`	string \| number	—	Change it to replay the error animation.
`disabled`	boolean	false	Greys the field out.
`readOnly`	boolean	false	Reads as filled, stays focusable.
`size`	'sm' \| 'md' \| 'lg'	'md'	Size scale, where the component defines one.
`classNames`	Record<Part, string>	—	Per-part class names.