Input

import { Input } from '@yarcl/react';

<Input placeholder="Default" />
<Input size="lg" color="success" />
<Input disabled />

size sets the height, padding and font size. An input and a Button of the same base size have the same height unless either component overrides it.
color sets the focus border. The ring follows the config’s focusRing.
Inside a Field it’s labelled, described and marked invalid automatically.

Start and end content

startContent and endContent accept text, icons, buttons or a combination of them. Both slots sit inside the input’s shared border and follow the control’s size and typography. Padding is applied to the editable input. The wrapper and slots have no padding or gap, so supplied content controls its own spacing. Slots keep their natural width; the input fills the remaining space. Start and end follow the text direction.

Search catalog

Amount

$USD

Amount in US dollars.

Password

<Input
  aria-label="Search catalog"
  startContent={<span className="input-content-inset"><SearchIcon aria-hidden="true" /></span>}
  endContent={<Button variant="solid" onClick={clearSearch}>Clear</Button>}
/>

<Field label="Amount" description="Amount in US dollars.">
  <Input
    startContent={<span className="input-content-inset">$</span>}
    endContent={<span className="input-content-inset">USD</span>}
    inputMode="decimal"
  />
</Field>

Give icons or text their desired inset with your own CSS. These variables follow the input’s selected size and component overrides:

.input-content-inset {
  display: inline-flex;
  align-items: center;
  padding-inline: var(--yarcl-px);
}

.input-content-inset > svg {
  width: var(--yarcl-icon);
  height: var(--yarcl-icon);
}

Direct Button and IconButton children fill the control’s inner height and attach with straight inner edges. Only the outside corners are rounded, following the input’s radius. Wrap a button in your own element when you want separate spacing and corners.

className and style apply to the outer control, including when both slots are empty. Native form attributes, handlers and ref target the inner <input>. Slot changes preserve the input, its uncontrolled value and focus.

Decorative icons should have aria-hidden="true"; icon buttons need an accessible label. Slots stay visible to assistive technology unless you hide them explicitly. Use a Field description or aria-describedby to associate meaningful units with the input. Disabling the input leaves supplied actions independently enabled; pass disabled to those buttons when needed. Input focus highlights the shared border and ring; buttons keep their own focus rings.

Props

Accepts native <input> attributes except color, size and children. Design tokens replace color and size; content goes in the two slots.

Prop	Type	Default	Description
`color`	`Color`config	`config.defaults.color`	Semantic color, from the `colors` config.
`endContent`	`ReactNode`		Content after the input, such as an icon, text or a button. Slot content controls its own spacing. Actions keep their own accessible names and disabled state.
`radius`	`'size' \| Radius`config	`config.defaults.radius`	Border radius, from the `radii` config, or `'size'` for the radius named like the control's size.
`size`	`'lg' \| 'xs' \| 'sm' \| 'md' \| 'xl'`	`config.defaults.size`	Control size, from the `sizes` config.
`startContent`	`ReactNode`		Content before the input, such as an icon, text or a button. Slot content controls its own spacing. Decorative icons should have `aria-hidden`.