FontPickerRoot

FontPickerRoot is a headless searchable font picker built on Reka UI Combobox primitives.

Props

Prop	Default	Type
listFamilies* Async source for available font families.	—	() => Promise<string[]>
triggerClass Optional class for the default trigger.	—	string | undefined
contentClass Optional class for dropdown content.	—	string | undefined
itemClass Optional class for default items.	—	string | undefined
searchClass Optional class for the search input.	—	string | undefined
viewportClass Optional class for the scroll viewport.	—	string | undefined
emptyClass Optional class for empty states.	—	string | undefined
emptySearchText Text shown when search returns no fonts.	—	string | undefined
emptyFontsText Text shown when no fonts are available.	—	string | undefined
emptyFontsHint Optional helper text for the empty-fonts state.	—	string | undefined

Model

Prop	Default	Type
v-model* Selected font family.	—	string

Events

Event	Payload	Description
select Emitted after a font family is selected.	family: string	Emitted after a font family is selected.

Slots

Slot	Props	Description
trigger Custom trigger content.	{ value: string, open: boolean }	Custom trigger content.
search Custom search input slot.	{ searchTerm: string, setInputRef: (el: HTMLInputElement | null) => void }	Custom search input slot.
item Custom item renderer.	{ family: string, selected: boolean }	Custom item renderer.
indicator Custom selected indicator.	{ selected: boolean }	Custom selected indicator.
empty Shown when no fonts are available.	—	Shown when no fonts are available.

Example

<FontPickerRoot v-model="fontFamily" :list-families="listFamilies">
  <template #trigger="{ value }">
    <button class="w-full truncate">{{ value }}</button>
  </template>
</FontPickerRoot>

Related APIs

• useTypography