Item

A single-line content row composing a leading media slot, a title and description content slot, and a trailing action slot along one horizontally centered line.

Notifications

A digest every weekday morning, plus anything urgent.

Push

Only mentions and direct replies, on this device.

SMS

Security alerts only. Standard rates apply.

Notifying you by email, push.

View code

let enabled = new Set(CHANNELS.filter((c) => c.enabled).map((c) => c.id));

function toggleChannel(event: Event) {
	let input = event.target as HTMLInputElement;
	if (input.checked) enabled.add(input.name);
	else enabled.delete(input.name);
	void handle.update();
}

<Header>Notifications</Header>

// A checkbox's change event bubbles, so the list is where the island listens.
<div mix={[on<HTMLDivElement, "change">("change", toggleChannel)]}>
	{CHANNELS.map((channel) => {
		let Glyph = CHANNEL_ICONS[channel.id];

		return (
			<Item key={channel.id}>
				<Item.Media>
					<Glyph aria-hidden="true" />
				</Item.Media>
				<Item.Content>
					<Item.Title>{channel.title}</Item.Title>
					<Item.Description>{channel.description}</Item.Description>
				</Item.Content>
				<Item.Actions>
					<Switch
						name={channel.id}
						defaultChecked={channel.enabled}
						aria-label={`Notify me by ${channel.title}`}
						mix={[ariaChecked()]}
					/>
				</Item.Actions>
			</Item>
		);
	})}
</div>

<Description>
	{enabled.size === 0
		? "You will not be notified at all."
		: `Notifying you by ${[...enabled].join(", ")}.`}
</Description>

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 { Item } from "@sdxc/ui";

Renders the row's host: a <div> laying Item.Media, Item.Content, and Item.Actions on one flex line, dropping Item.Actions to a second line once the row narrows past threshold.

Composition

The parts the component publishes, each a static property of the host.

Item
Item.MediaRenders Item.MediaProps.children as the row's leading slot: a shrink-proof, centered <div> colored from the neutral foreground so a nested icon inherits it through currentcolor.
Item.ContentRenders Item.ContentProps.children as the row's text column: a <div> stacking Item.Title and Item.Description with its minimum inline size collapsed to 0 so their truncation takes effect.
Item.TitleRenders Item.TitleProps.children as the row's label in a plain <div>, since a document outline gains nothing from a heading entry per repeated row, truncated to one line in the foreground's emphasized tone.
Item.DescriptionRenders Item.DescriptionProps.children as the row's supporting detail in a native <p>, truncated to one line to match Item.Title so the pair reads as one compact two-line block.
Item.ActionsRenders Item.ActionsProps.children as the row's trailing slot, pinned to the inline-end edge; once Item wraps narrow, it drops to its own line, indented past Item.Media to read as trailing.

Examples

<Item>
	<Item.Content>
		<Item.Title>{t("settings.emailNotifications.title")}</Item.Title>
		<Item.Description>{t("settings.emailNotifications.description")}</Item.Description>
	</Item.Content>
	<Item.Actions>
		<Switch name="emailNotifications" />
	</Item.Actions>
</Item>

Props

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

Prop	Type	Description
`children`	`RemixNode`	The row's compound parts: Item.Media, Item.Content, and Item.Actions.