Preview

Installation

npx sigma-ui@latest add input-group

Usage

<script setup lang="ts">
import { InputGroup, InputGroupAddon, InputGroupInput } from '@/components/ui/input-group';
</script>

<template>
  <InputGroup>
    <InputGroupAddon>https://</InputGroupAddon>
    <InputGroupInput placeholder="sigma-ui.dev" />
  </InputGroup>
</template>

InputGroup draws the border and the focus outline. The control inside it is borderless.

• InputGroupAddon places content at inline-start, inline-end, block-start, or block-end. Clicking the addon focuses the control.
• InputGroupButton is a button sized to sit inside the field.
• InputGroupText is static text or an icon.
• InputGroupInput and InputGroupTextarea are the controls. They accept the same attributes as Input and Textarea.

Examples

Textarea

align="block-end" stacks the addon under the textarea.

Invalid

Set aria-invalid on the control. The group border turns destructive.

API Reference

InputGroup

Slots

Slot	Scope
default Addons and one InputGroupInput or InputGroupTextarea.	-

InputGroupAddon

Props

Prop	Type	Default
align Where the addon sits relative to the control.	"inline-start" | "inline-end" | "block-start" | "block-end" | null	"inline-start"

Slots

Slot	Scope
default Icon, text, Kbd, or InputGroupButton.	-

InputGroupButton

Props

Prop	Type	Default
variant Visual style of the button. Defaults to ghost so the button sits inside the field.	"default" | "destructive" | "secondary" | "outline" | "ghost" | "link" | null	"ghost"
size Size of the button inside the field.	"xs" | "sm" | "icon-xs" | "icon-sm" | null	"xs"

Slots

Slot	Scope
default Button label or icon.	-

InputGroupInput

This component has no props, events, or slots.

InputGroupText

Slots

Slot	Scope
default Text or an icon shown inside an addon.	-

InputGroupTextarea

This component has no props, events, or slots.

Accessibility

The group renders role="group". Addon content that is decorative, such as an icon, should be hidden from assistive technology with aria-hidden. Give the control a <label>, or set aria-label.

Key	Description
Tab	Moves focus to the control, then to any buttons in the addons.