Group

A visual and semantic wrapper binding a cluster of related controls into one unit.

Secret key

Rotating the key revokes the previous one after an hour.

Invoice total

View code

let copied = false;

<Label htmlFor="apiKey">Secret key</Label>
<Group>
	<Input id="apiKey" name="apiKey" readOnly value="sk_live_51Nc8yR2eZvKYlo2C" />
	<Button
		variant="outline"
		color="neutral"
		commandfor="apiKey"
		command={COPY_COMMAND}
		mix={[
			copyToClipboard(),
			on<HTMLButtonElement, "ui:copy">("ui:copy", (event) => {
				copied = event.success;
				void handle.update();
			}),
		]}
	>
		{copied ? <CheckIcon /> : <ClipboardIcon />}
		<span mix={[visuallyHidden()]}>{copied ? "Copied" : "Copy"}</span>
	</Button>
</Group>
<Description>Rotating the key revokes the previous one after an hour.</Description>

<Label htmlFor="amount">Invoice total</Label>
<Group>
	<Select name="currency" aria-label="Currency">
		<Select.Option value="eur" selected>
			EUR
		</Select.Option>
		<Select.Option value="usd">USD</Select.Option>
		<Select.Option value="gbp">GBP</Select.Option>
	</Select>
	<Input id="amount" name="amount" type="number" min={0} step={0.01} defaultValue="1250.00" />
</Group>

Installation

An ordinary dependency: install it, import the theme once, and import the component where it is used.

npm add @sdxc/ui

import "@sdxc/ui/theme.css";

Usage

import { Group } from "@sdxc/ui";

Lays children out in a centered flex row with no border, background, or gap, joining their edges into one shape: only the cluster's outer corners stay round, and the seam two controls share is drawn once. Focus is shown by whichever control holds it.

Examples

<Group aria-invalid="true">
	<input aria-label={t("form.email")} />
	<Button aria-label={t("form.clear")}>
		<XIcon />
	</Button>
</Group>

Props

Read from the component's own types, so every prop, every default and every allowed value is listed.

Also accepts everything in TagProps<"div">.