UI Skillbook
2

Input Group

One input surface with text, icons, buttons or a header and footer attached around an input or textarea.

UI SkillbookSiteplane docsSiteplane UI 1.8.1
Works withClaude CodeCodexCursorOpenCodeUniversal
Install

Run npx uiskillbook get siteplane-input-group and follow the Siteplane Input Group skill it prints for this task.

Paste this into your agent.

Input Group attaches extras to a field: a currency or protocol prefix, a search icon, a show-password action, an apply button, or a toolbar under a comment box. It draws one frame around everything.

Install

bashnpx shadcn@4.18.0 add @siteplane/input-group

Import it from @/siteplane/components/input-group. The project needs Siteplane UI's one-time setup first: installation.

When to pick it

  • vs Group: Pick Group to join separate controls, like an input and a submit button, as segments with their own frames.
  • vs Input: Pick plain Input when nothing attaches to the field.
  • vs Prompt Input: Pick Prompt Input for a full chat composer.

Rules

  • Put InputGroupInput or InputGroupTextarea inside the group. The group owns the surface and the inner control stays unstyled.
  • Place extras in InputGroupAddon with align set to inline-start, inline-end, block-start or block-end.
  • For icon actions, use Button with profile="field-action" and shape="square". Keep a password toggle's label constant and show its state with aria-pressed.
  • Addon text is not part of the value or the label. Name the field with Field and FieldLabel.
  • Compose Button directly. Input Group has no InputGroupButton part.

Reference

  • Input Group docs, with every prop, part and example (Markdown)
  • Siteplane UI 1.8.1, Forms & selection. Read the installed source under src/siteplane before relying on an API.

Add to your agent

Print this skill from the terminal, or connect the whole catalog over MCP. Setup guides

CLI

npx uiskillbook get siteplane-input-group

MCP server

https://www.uiskillbook.com/mcp

Questions

Related skills

Form Field Validation Timingby UI Skillbook

Validate at the right moment — not on every keystroke, not only on submit.

Forms

Siteplane Attachmentby UI Skillbook

A card for a file or image attached to a message or draft, with upload states and actions.

Siteplane UI

Siteplane Autocompleteby UI Skillbook

A text input that suggests completions while still accepting whatever the person types.

Siteplane UI

Siteplane Calendarby UI Skillbook

An inline month grid for picking a single date, several dates or a range, with unavailable-day rules.

Siteplane UI

Back to Siteplane UI