Input group

Joins a text field with a prefix or suffix inside one 1px border.

Preview

https://

In action

Host

Where it lives

Addon and field share one hairline.

https://

When to use

Use it for

A fixed prefix or suffix that belongs to the value: a protocol, a unit, a currency.
end to place the addon after the field.

Not for

Buttons inside the field; use InlineForm.
Icons as decoration; the addon is text.

Install

Three ways in. They share one source, so the pixels match whichever you pick.

1. Import the package

npm install @noorddev/vlak-react

// once, next to your app's root
import "@noorddev/vlak-react/css";

import { Input, InputAddon, InputGroup } from "@noorddev/vlak-react";

Precompiled React and one stylesheet. No compiler to configure. Per-component imports work too: @noorddev/vlak-react/components/input-group.

2. Vendor the source

npx @noorddev/vlak-cli add input-group

The StyleX leaf lands in components/vlak/ with its dependencies, for your own compiler to own. See StyleX.

3. Through shadcn

npx shadcn add https://vlak.dev/r/input-group.json

The same registry item, installed by shadcn's CLI.

CSS only

<link rel="stylesheet" href="node_modules/@noorddev/vlak/css/vlak.css" />

No React. Link vlak.css and use the markup and classes below.

React

import { Input, InputAddon, InputGroup } from "@noorddev/vlak-react";

<InputGroup>
  <InputAddon>https://</InputAddon>
  <Input placeholder="vlak.dev" aria-label="Site" />
</InputGroup>

<InputGroup end>
  <Input placeholder="0.00" aria-label="Amount" />
  <InputAddon>EUR</InputAddon>
</InputGroup>

Props

InputAddon

Also accepts HTMLAttributes<HTMLSpanElement>.

InputGroup

Addon and field share one control boundary.

Prop	Type	Default	Description
`end`	`boolean`		Place the addon after the field.

Also accepts HTMLAttributes<HTMLDivElement>.

Accessibility

The Input child is cloned with plain and grouped; it keeps its own id and name.
The addon is presentational text. Give the input an aria-label or a FieldLabel; the addon does not name it.

Markup

<div class="rs-input-group"><span class="rs-input-addon">https://</span><input class="rs-input" placeholder="vlak.dev" /></div>

Classes

.rs-input-group.rs-input-addon.rs-input-group-end

Depends on

/input