Input

import { Input } from 'yarcl';

Search

<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 size have the same height.
• color sets the focus border and ring.
• Inside a Field it’s labelled, described and marked invalid automatically.

Props

Accepts every native <input> attribute except color and size, which are replaced by design tokens.

Prop	Type	Default	Description
color	Colorconfig	config.defaults.color	Semantic color, from the colors config.
radius	'size' | Radiusconfig	config.defaults.radius	Border radius, from the radii config, or 'size' for the radius named like the control's size.
size	Sizeconfig	config.defaults.size	Control size, from the sizes config.