Skip to content

shadcn.io is an independent project built on shadcn/ui

Free

Inline Labels Input Group for React

A username field with an @ prefix and a price field with a $ prefix, and each prefix is a label.

Two short prefixes inside the field. @ sits before a username, and $ sits before a price. Each prefix is a label, so clicking it focuses the input. The price field uses a decimal keyboard and the placeholder 0.00.

Use a prefix when it is part of how the value is read, not a separate caption. A caption above the field is a Label on its own. In React, Base UI does not include the prefix in the submitted value.

Preview

Preview width

Installation

Sign in to get your install command
Free with an account. It carries your token, so the CLI installs everything in one go.
GoogleGitHub
Use email insteadNo credit card

Anatomy

Input Group anatomy: root, addon, input, text, button

Usage

<div className="flex w-full max-w-sm flex-col gap-4">
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Username"
      id="input-group-inline-username"
      placeholder="shadcn"
      type="text"
    />
    <InputGroupAddon>
      <Label htmlFor="input-group-inline-username">@</Label>
    </InputGroupAddon>
  </InputGroup>
  <InputGroup className="bg-background">
    <InputGroupInput
      aria-label="Price"
      id="input-group-inline-price"
      inputMode="decimal"
      placeholder="0.00"
      type="text"
    />
    <InputGroupAddon>
      <Label htmlFor="input-group-inline-price">$</Label>
    </InputGroupAddon>
  </InputGroup>
</div>

FAQ

How does the prefix sit before the input?

The addon keeps the default align, inline-start, while the code keeps the input first.

Why is the prefix a Label?

With htmlFor pointing at the input's id, a click on @ or $ focuses the field.

What do screen readers call the fields?

Username and Price, from their aria-labels, which are clearer than @ or $ alone.

How is the price input set up?

type="text" with inputMode="decimal", which shows a numeric keyboard with a decimal point and keeps the value as typed.

Can I use plain text instead of a Label?

Yes: InputGroupText in the addon, as in Currency Input. A click still focuses the input, through the addon.

Does the prefix follow right-to-left text?

Yes. inline-start is the start of the line in either direction.

API Reference

Input Group

Sets aria-label="Username", id="input-group-inline-username", placeholder="shadcn", type="text", aria-label="Price" and id="input-group-inline-price". The rest is on the Input Group page.

Label

Sets htmlFor="input-group-inline-username" and htmlFor="input-group-inline-price". The rest is on the Label page.

All 39 input group examples