Font Family Picker Preview

ProNew

A font family picker where every option is drawn in its own typeface and the chosen font previews a sample sentence. Use this when people style text, a theme or a document.

Customize

Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.

value

defaultValue

sample

disabled

Guide and examples

When to use it

Use it in editors, theme settings and brand kits, where a font name alone tells people little and seeing the letterforms decides the choice.

Do not use it when fonts must be loaded from the network before they can be shown. Preload them, or show a text label only; this pattern renders with the font stack you give it.

Installation

This item is part of tealmac UI Pro

The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.

Props

Prop	Type	Default	Description
`fonts`	`{ name, stack, category? }[]`	8 system stacks	`stack` is the CSS `font-family` value.
`value`	`string`	-	The font `name` (controlled).
`defaultValue`	`string`	-	Initial font.
`onValueChange`	`(name: string, stack: string) => void`	-	Runs when a font is picked.
`sample`	`string`	`The quick brown fox…`	Text shown in the preview.
`disabled`	`boolean`	`false`	Disables the button.

Accessibility

The button is a combobox; its name is the chosen font name, drawn in that font.
Each option's text is the font name, so search and screen readers do not depend on the glyphs.
The preview is aria-live="polite" and changes only when the choice changes.
Group headings (Sans serif, Serif, Monospace) label their options.

Testing

The pattern ships with a Testing Library test (font-family-picker-preview.test.tsx) that covers option names, drawing in the typeface, grouping by category and the preview after selection.