InputGroup
One field, joined addons.
About
Joined field: sui-input-group-addon segments, a native <input> or <select> and buttons share one border, in the order you slot them. The <input>, or any child with data-grow, takes the remaining width; addons and a select size to their content. Not form-associated: the native control inside posts itself. Label, help and error come from the shared shell.
Usage
<sui-input-group label="Website" help="Public site.">
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" value="fallscitysupply.com">
</sui-input-group>
<script type="module">
import { defineCustomElements } from "@shineui/core/loader";
import "@shineui/core/shineui.css";
defineCustomElements();
const el = document.querySelector("sui-input-group");
el.addEventListener("suiBlur", (e) => console.log(e.detail));
</script>
import { SuiInputGroup } from "@shineui/react";
import "@shineui/core/shineui.css";
export function Example() {
return (
<SuiInputGroup label="Website" help="Public site." onSuiBlur={(e) => console.log(e.detail)}>
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" value="fallscitysupply.com">
</SuiInputGroup>
);
}
<script setup>
import { SuiInputGroup } from "@shineui/vue";
import "@shineui/core/shineui.css";
const onChange = (e) => console.log(e.detail);
</script>
<template>
<SuiInputGroup label="Website" help="Public site." @sui-blur="onChange"><sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" value="fallscitysupply.com"></SuiInputGroup>
</template>
import { Component } from "@angular/core";
import { SuiInputGroup } from "@shineui/angular";
@Component({
standalone: true,
imports: [SuiInputGroup],
template: `<sui-input-group label="Website" help="Public site." (suiBlur)="onChange($event)"><sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" value="fallscitysupply.com"></sui-input-group>`,
})
export class Example {
onChange(e: CustomEvent) { console.log(e.detail); }
}
Basic
The group is not form-associated. It labels and paints the slotted control, wires aria-describedby onto it, and points the label at it, so clicking the label focuses the input.
<div style="max-width:340px">
<sui-input-group label="Website" help="Public site.">
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" value="fallscitysupply.com">
</sui-input-group>
</div>
Prefix and suffix
Addons sit on either side of the input, as many as you need. data-grow marks the segment that takes the remaining width.
<div style="display:flex;flex-direction:column;gap:12px;max-width:340px">
<sui-input-group>
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow value="fallscitysupply.com" aria-label="Website">
</sui-input-group>
<sui-input-group>
<sui-input-group-addon><i class="fa-solid fa-dollar-sign" style="font-size:11px"></i></sui-input-group-addon>
<input data-grow placeholder="0.00" style="text-align:right" aria-label="Amount">
<sui-input-group-addon>USD</sui-input-group-addon>
</sui-input-group>
</div>
With a button
A sui-button is a segment like any other: square, the height of the group, inside its border. Put it last for a search or an apply action. Focused, it draws its own ring inside the frame.
<div style="display:flex;flex-direction:column;gap:12px;max-width:340px">
<sui-input-group label="Coupon">
<input data-grow placeholder="Enter a code">
<sui-button variant="brand" label="Apply"></sui-button>
</sui-input-group>
<sui-input-group label="Find a customer">
<sui-input-group-addon><i class="fa-solid fa-magnifying-glass" style="font-size:11px"></i></sui-input-group-addon>
<input data-grow placeholder="Name or account number">
<sui-button variant="outline" label="Search"></sui-button>
</sui-input-group>
</div>
With a picker
Any ShineUI field can be a segment. Give it data-grow and the group draws its edge, focus and fill, so a date picker or a select reads as part of one field. Name it with aria-label, since the label points at the first native control.
<div style="display:flex;flex-direction:column;gap:12px;max-width:340px">
<sui-input-group label="Due">
<sui-input-group-addon>After</sui-input-group-addon>
<sui-date-picker data-grow aria-label="Due after"></sui-date-picker>
</sui-input-group>
<sui-input-group label="Owner">
<sui-select id="ig-owner" data-grow aria-label="Owner" placeholder="Anyone"></sui-select>
<sui-button variant="outline" label="Assign"></sui-button>
</sui-input-group>
</div>
// setup(root): properties and events
setup(root) {
root.querySelector('#ig-owner').options = ['Davon Lane', 'Ava Chen', 'Marcus Reid'].map((n) => ({ value: n, label: n }));
}
With a select
A native select is a segment too: it takes the input skin and the chevron sui-select draws, and sizes to its longest option. The label points at the first control, so give a second one its own aria-label.
<div style="display:flex;flex-direction:column;gap:12px;max-width:340px">
<sui-input-group label="Amount">
<input data-grow name="amount" placeholder="0.00" style="text-align:right">
<select name="currency" aria-label="Currency">
<option>USD</option>
<option>EUR</option>
<option>GBP</option>
</select>
</sui-input-group>
<sui-input-group label="Find">
<select name="scope" aria-label="Search in">
<option>Invoices</option>
<option>Customers</option>
<option>Vendors</option>
</select>
<input data-grow name="q" placeholder="Name or number">
<sui-button variant="outline" label="Search"></sui-button>
</sui-input-group>
</div>
Sizes
md is the default, one height with every select, picker and button. lg is the roomier group for a sign-in or marketing page; sm packs into table rows. The addons follow the group height.
<div style="display:grid;gap:12px;max-width:340px">
<sui-input-group size="lg" label="Large">
<sui-input-group-addon>GL</sui-input-group-addon>
<input data-grow value="4402 Operating">
</sui-input-group>
<sui-input-group size="md" label="Medium">
<sui-input-group-addon>GL</sui-input-group-addon>
<input data-grow value="4410 Payroll">
</sui-input-group>
<sui-input-group size="sm" label="Small">
<sui-input-group-addon>GL</sui-input-group-addon>
<input data-grow value="4420 Freight">
</sui-input-group>
</div>
States
The asterisk is drawn here; the constraint itself stays on the slotted input, which is what the form validates. An error replaces the help line under the whole group, never under one segment.
<div style="display:flex;flex-direction:column;gap:14px;max-width:340px">
<sui-input-group label="Website" required help="Public site.">
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" required value="fallscitysupply.com">
</sui-input-group>
<sui-input-group label="Amount" error="Amount is required.">
<sui-input-group-addon><i class="fa-solid fa-dollar-sign" style="font-size:11px"></i></sui-input-group-addon>
<input data-grow name="amount" placeholder="0.00" style="text-align:right">
<sui-input-group-addon>USD</sui-input-group-addon>
</sui-input-group>
<sui-input-group label="Ledger" disabled>
<sui-input-group-addon>GL</sui-input-group-addon>
<input data-grow value="4402 Operating" disabled>
</sui-input-group>
</div>
In a form
The name lives on the slotted input, not on the group, so each control posts one entry of its own. Disable the input as well as the group, or the grayed field keeps posting.
<form id="ig-form" style="display:grid;gap:14px;max-width:340px">
<sui-input-group label="Website" required>
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="website" required value="fallscitysupply.com">
</sui-input-group>
<sui-input-group label="Amount">
<sui-input-group-addon><i class="fa-solid fa-dollar-sign" style="font-size:11px"></i></sui-input-group-addon>
<input data-grow name="amount" value="1240.00" style="text-align:right">
<sui-input-group-addon>USD</sui-input-group-addon>
</sui-input-group>
<sui-input-group label="Ledger" disabled>
<sui-input-group-addon>GL</sui-input-group-addon>
<input data-grow name="ledger" value="4402 Operating" disabled>
</sui-input-group>
<div style="display:flex;gap:8px">
<sui-button type="submit" variant="brand" label="Save vendor"></sui-button>
<sui-button type="reset" variant="outline" label="Reset"></sui-button>
</div>
<output id="ig-out" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Submit to see what posts.</output>
</form>
// setup(root): properties and events
setup(root) {
const form = root.querySelector('#ig-form');
const out = root.querySelector('#ig-out');
form.addEventListener('submit', (e) => {
e.preventDefault();
out.textContent = [...new FormData(form)].map(([k, v]) => `${k}=${v || '(empty)'}`).join(' ');
});
form.addEventListener('reset', () => {
out.textContent = 'Reset. Submit to see what posts.';
});
}
Events
The group is not form-associated and has no value events of its own; the slotted control keeps its native input and change. suiFocus and suiBlur fire as focus enters and leaves the group, a move to the button included. Focus in a list or calendar a control opened still counts as the control's.
<div style="display:grid;gap:10px;max-width:340px">
<sui-input-group id="ig-events" label="Website">
<sui-input-group-addon>https://</sui-input-group-addon>
<input data-grow name="site" placeholder="example.com">
<sui-button variant="outline" label="Check"></sui-button>
</sui-input-group>
<span id="ig-log" style="font:460 13px/1.6 var(--font-sans);color:var(--ink-muted)">Idle.</span>
</div>
// setup(root): properties and events
setup(root) {
const log = root.querySelector('#ig-log');
const el = root.querySelector('#ig-events');
el.addEventListener('suiFocus', () => {
log.textContent = 'suiFocus';
});
el.addEventListener('suiBlur', () => {
log.textContent = 'suiBlur';
});
}
Keyboard
| Key | Action |
|---|---|
| Tab | Moves through the slotted controls in order: an addon that is text is skipped, a button or a select takes its own stop. |
| Printable characters Enter Space | Native: each slotted control keeps its own keys. |
API
<sui-input-group>
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
disabled | disabled | boolean | false | Paints the group disabled. Disable the slotted input too, or it keeps posting. |
error | error | stringstring | undefined | Error message; paints the group border in the danger tone. | |
help | help | stringstring | undefined | Help text under the group. Replaced by error when set. | |
invalid | invalid | boolean | false | Danger border without a message. |
label | label | stringstring | undefined | Field label above the group. Without one the slotted control takes the host's aria-label or aria-labelledby as its name, unless it carries its own; a visible label wins over both. | |
required | required | boolean | false | Draws the required asterisk beside the label. The constraint itself stays on the slotted control (<input required>), which is the element the form validates: this element is not form-associated, so it has no validity of its own. |
size | size | "lg" | "md" | "sm" | 'md' | Group height: sm 28 for table rows, md 34 for forms and toolbars (the default, shared with the select family and the buttons, so a form built from defaults is one height), lg 42 for a sign-in or marketing page. The addons follow it. |
Events
| Event | Detail | React | Vue | Description |
|---|---|---|---|---|
suiBlur | void | onSuiBlur | @sui-blur | Fires when a control in the group loses focus, a move to the next control in the group included; no detail. Focus moving into the list or calendar a control opened is not a blur, wherever that panel sits: the group keeps its focus border, and fires once focus has left the control and its panel. Does not bubble. |
suiFocus | void | onSuiFocus | @sui-focus | Fires when a control in the group takes focus, as the group paints its focus border; no detail. The same pair is on every text field. Focus coming back to a control from the list or calendar it opened is not a new focus. Does not bubble. |
Slots
| Slot | Description |
|---|---|
(default) | The segments in order: sui-input-group-addon, <input>, <select>, sui-button. |
<sui-input-group-addon>
Slots
| Slot | Description |
|---|---|
(default) | Addon content: text or an icon. |
Theming
Every design token this element can render with, read from its own stylesheets and the ones it imports. Set a token on :root or on any ancestor and every use below follows it. The values shown are the ones in the theme you are viewing. The list is read per stylesheet, so an element that imports a shared drawing module lists that module's tokens too, whether or not it paints with all of them.
<sui-input-group>
Color15
Typography1
Spacing and size4
Radius1
Motion2
<sui-input-group-addon>
Color2
Typography1
Every name above is listed with its value and its role in Foundations.