Input

A text field styled with the design system's tokens, with an optional trailing action slot.

Installation

npm install @sipe-team/input

import '@sipe-team/input/styles.css';

Usage

An uncontrolled field with a placeholder. Input renders a native <input> inside a styled wrapper, so native value / defaultValue / onChange behave exactly as they do on a plain input.

Examples

Font size

fontSize sets the field's text size in px, in fixed steps from 12 to 48. Default is 16.

Font weight

fontWeight accepts regular (default), medium, semiBold, and bold.

Type

type is restricted to the text-like input types: email, password, search, tel, text (default), and url. It is forwarded to the native <input>.

Disabled

The native disabled attribute is forwarded to the inner <input>, and the wrapper takes a muted background.

Action button

Render an Action as a child to add a trailing button inside the field — for example a control that clears the value. Action renders a <button> after the input.

asChild

Set asChild on Action to merge its props and styles onto the child element instead of rendering a button — render it as a link, for instance.

?

Anatomy

import { Input, Action } from '@sipe-team/input';

export default () => (
  <Input type="text" fontSize={16} fontWeight="regular" placeholder="Search">
    <Action type="button" onClick={handleClear}>
      <Icon />
    </Action>
  </Input>
);

Input renders a <div role="presentation"> wrapper around a native <input>. children (typically an Action) render after the input, inside the same wrapper. Action is meant to be rendered inside an Input.

API Reference

Input

Renders a <div role="presentation"> wrapper and forwards its ref to the inner <input>.

Prop	Type	Default	Description
children	ReactNode	—	Rendered after the input, inside the wrapper. Usually an Action.
type	'email' | 'password' | 'search' | 'tel' | 'text' | 'url'	'text'	Sets the native input type.
fontSize	12 | 14 | 16 | 18 | 20 | 24 | 28 | 32 | 36 | 48	16	Text size of the field, in px.
fontWeight	'regular' | 'medium' | 'semiBold' | 'bold'	'regular'	Font weight of the field's text.
className	string	—	Appended to the wrapper's class.

Also accepts every ComponentProps<'input'> except type (placeholder, value, defaultValue, onChange, disabled, name, …). ref forwards to the <input>; className goes on the wrapper, and every other prop — including style — is forwarded to the <input>. spellCheck is forced to "false".

Action

Renders a <button> (or the child element when asChild is set) and forwards its ref. Meant to be rendered inside an Input.

Prop	Type	Default	Description
children	ReactNode	—	The button contents, usually an icon.
asChild	boolean	false	Merge props onto the child instead of rendering a button.
type	'button' | 'reset'	—	The button's type. Left unset when omitted.
className	string	—	Appended to the action's class.

Also accepts every ComponentProps<'button'> except type (onClick, disabled, aria-label, …), forwarded to the rendered element.

Accessibility

• Renders a native <input>, so the field is keyboard-focusable and announced as a textbox.
• The component does not render or associate a <label>. Pair it with your own <label htmlFor> or pass an aria-label for an accessible name.
• Action renders a native <button>; give it an aria-label when its content is an icon.

Known limitations

• No built-in label association — see Accessibility above.
• Colors are hardcoded to fixed gray tokens (there is a // TODO ThemeProvider in the source), so the field does not adapt to a dark theme yet.