Text Fields

Input is the single-line text control used across every form in Helm. It is a thin wrapper over the native <input>, so any standard input attribute (type, placeholder, value, disabled, and so on) works as expected. When you need to attach a prefix, suffix, icon, or inline button, reach for InputGroup and its slotted parts instead of styling the input by hand.

Live demo

The interactive story below runs from the deployed Storybook.

Usage

Source: input.tsx, input-group.tsx

import { Input } from "@beacon/design-system";

// Plain single-line input. Pass any native input attribute.
<Input placeholder="Enter text..." />
<Input type="email" placeholder="you@example.com" />
<Input type="password" placeholder="Password" />
<Input disabled placeholder="Disabled input" />

For a prefix, suffix, or inline action, compose with InputGroup:

import {
  InputGroup,
  InputGroupAddon,
  InputGroupText,
  InputGroupInput,
  InputGroupButton,
  Button,
} from "@beacon/design-system";

// Prefix addon (the scheme on a URL field).
<InputGroup>
  <InputGroupAddon>
    <InputGroupText>https://</InputGroupText>
  </InputGroupAddon>
  <InputGroupInput placeholder="example.com" />
</InputGroup>

// Trailing inline button.
<InputGroup>
  <InputGroupInput placeholder="Search..." />
  <InputGroupButton>
    <Button>Search</Button>
  </InputGroupButton>
</InputGroup>

Input props

Input accepts every native <input> attribute (it forwards ...props to the element) and forwards its ref to the underlying <input>. The most commonly set props:

Prop	Type	Default	Description
type	string	"text"	Native input type (text, email, password, number, and so on).
placeholder	string	—	Placeholder shown when the field is empty.
value / defaultValue	string	—	Controlled / uncontrolled value.
disabled	boolean	false	Disables the input and dims it.
className	string	—	Extra classes merged onto the input.

InputGroup parts

Part	Role
InputGroup	Bordered container that lays out the control plus its addons in a row (or a column for block-aligned addons) and shows shared focus and error styling.
InputGroupInput	The text input slotted inside the group; renders an Input with the group border and ring removed.
InputGroupTextarea	A multi-line control variant for the group, rendering a Textarea styled to fit.
InputGroupAddon	A prefix or suffix region. Position with align: "inline-start" (default), "inline-end", "block-start", "block-end". Clicking it focuses the input.
InputGroupText	Muted inline text or icon for use inside an addon (for example a unit or a scheme).
InputGroupButton	A compact Button sized to sit inside the group; size is "xs" (default), "sm", "icon-xs", or "icon-sm".

When to use

• Any single-line free-text entry: names, emails, search boxes, URLs.
• Numeric, password, and other native input types via the type prop.
• Use InputGroup when the field needs a unit, currency symbol, scheme prefix, icon, or an inline submit or clear button.

Do not wrap an Input in your own bordered div to fake an addon. Use InputGroup so the border, focus ring, and error state stay consistent. For the label, helper text, and validation message around a control, wrap it in Field.