@payfit/unity-components
Version:
3,178 lines • 100 kB
JSON
{
"components": [
{
"description": "Groups high-priority page actions in a responsive toolbar for bulk or contextual workflows.",
"docsHref": "?path=/docs/component-reference-actionbar--docs",
"id": "component-reference-actionbar",
"keywords": [
"action-bar",
"action",
"bar",
"Bulk action bar",
"Contextual action bar",
"Toolbar"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-actionbar--default"
},
"related": [],
"section": "components",
"tags": ["category:tabular-data", "type:component", "category:actions"],
"title": "ActionBar"
},
{
"description": "Turns custom content into an accessible press target without changing its layout or visual structure.",
"docsHref": "?path=/docs/component-reference-actionable--docs",
"id": "component-reference-actionable",
"keywords": ["actionable", "Pressable", "Clickable"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-actionable--primary"
},
"related": [],
"section": "components",
"tags": ["type:primitive", "type:component", "category:foundations"],
"title": "Actionable"
},
{
"description": "Alerts communicate important contextual information, status, or calls to action.",
"docsHref": "?path=/docs/component-reference-alert--docs",
"id": "component-reference-alert",
"keywords": [
"message",
"notice",
"status",
"banner",
"information",
"Inline notification"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-alert--default",
"zoom": 0.8
},
"related": [],
"section": "components",
"tags": [
"type:component",
"category:content",
"behavior:disclosure",
"behavior:validation"
],
"title": "Alert"
},
{
"description": "Position a small element relative to a bigger element in any of its corners",
"docsHref": "?path=/docs/component-reference-anchor--docs",
"id": "component-reference-anchor",
"keywords": ["anchor", "Corner anchor", "Overlay anchor"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-anchor--primary"
},
"related": [],
"section": "components",
"tags": ["type:primitive", "type:component", "category:foundations"],
"title": "Anchor"
},
{
"description": "Provides the app shell structure for side navigation, top bars, and main page content.",
"docsHref": "?path=/docs/component-reference-applayout--docs",
"id": "component-reference-applayout",
"keywords": [
"app-layout",
"app",
"layout",
"App shell",
"Application shell"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-applayout--default",
"zoom": 0.4
},
"related": [],
"section": "patterns",
"tags": ["category:layout", "type:pattern"],
"title": "AppLayout"
},
{
"description": "Builds product navigation menus with grouped items, active states, and space-specific actions.",
"docsHref": "?path=/docs/component-reference-appmenu--docs",
"id": "component-reference-appmenu",
"keywords": [
"app-menu",
"app",
"menu",
"Sidebar navigation",
"Side navigation",
"Navigation menu"
],
"preview": {
"type": "image",
"src": "/catalog/appmenu-preview.png",
"alt": "AppMenu preview with the application navigation drawer open."
},
"related": [],
"section": "patterns",
"tags": [
"category:navigation",
"behavior:selection",
"behavior:disclosure",
"behavior:navigation",
"type:pattern",
"category:layout"
],
"title": "AppMenu"
},
{
"description": "Represents an entity profile (company or person) that opens a composed profile menu from an application-shell trigger.",
"docsHref": "?path=/docs/component-reference-appprofilemenubutton--docs",
"id": "component-reference-appprofilemenubutton",
"keywords": [
"profile",
"account",
"avatar",
"menu",
"application shell",
"profile menu",
"entity"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-appprofilemenubutton--primary"
},
"related": [],
"section": "patterns",
"tags": [
"type:pattern",
"category:navigation",
"category:content",
"behavior:disclosure",
"behavior:editing"
],
"title": "AppProfileMenuButton"
},
{
"description": "Provides the content-level sticky top-bar structure for application shells.",
"docsHref": "?path=/docs/component-reference-apptopbar--docs",
"id": "component-reference-apptopbar",
"keywords": ["app-top-bar", "top bar", "app shell", "sticky header"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-apptopbar--primary"
},
"related": [],
"section": "patterns",
"tags": ["category:navigation", "type:pattern"],
"title": "AppTopBar"
},
{
"description": "Combines text search and option selection for quickly finding one value from a filtered list.",
"docsHref": "?path=/docs/component-reference-autocomplete--docs",
"id": "component-reference-autocomplete",
"keywords": [
"autocomplete",
"Combobox",
"Searchable select",
"Typeahead"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-autocomplete--default"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:filtering",
"behavior:editing"
],
"title": "Autocomplete"
},
{
"description": "Avatars represent people, companies, or entities with initials, icons, or images.",
"docsHref": "?path=/docs/component-reference-avatar--docs",
"id": "component-reference-avatar",
"keywords": [
"person",
"profile",
"user",
"company",
"identity",
"Profile picture",
"User avatar"
],
"preview": {
"type": "story",
"story": "with-image",
"storyId": "component-reference-avatar--with-image"
},
"related": [],
"section": "components",
"tags": [
"type:component",
"category:content",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "Avatar"
},
{
"description": "Avatar groups display related people or entities with responsive sizing and optional truncation.",
"docsHref": "?path=/docs/component-reference-avatargroup--docs",
"id": "component-reference-avatargroup",
"keywords": ["avatar", "group", "people", "members", "profile", "users"],
"preview": {
"type": "story",
"story": "with-images-and-fallbacks",
"storyId": "component-reference-avatargroup--with-images-and-fallbacks"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:content"],
"title": "AvatarGroup"
},
{
"description": "AvatarWithTooltip provides a focusable, non-actionable avatar with an identifying tooltip.",
"docsHref": "?path=/docs/component-reference-avatar-avatarwithtooltip--docs",
"id": "component-reference-avatar-avatarwithtooltip",
"keywords": [
"avatar",
"tooltip",
"profile",
"identity",
"accessibility",
"focus",
"hover",
"keyboard",
"non-actionable"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-avatar-avatarwithtooltip--default"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:content", "behavior:disclosure"],
"title": "AvatarWithTooltip"
},
{
"description": "Labels statuses, counts, or metadata with compact contextual styling and optional icons.",
"docsHref": "?path=/docs/component-reference-badge--docs",
"id": "component-reference-badge",
"keywords": ["badge", "Status badge", "Count badge"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-badge--primary"
},
"related": [],
"section": "components",
"tags": ["category:information", "type:component", "category:content"],
"title": "Badge"
},
{
"description": "Displays mobile-first modal content from the bottom of the viewport for focused tasks.",
"docsHref": "?path=/docs/component-reference-bottomsheet--docs",
"id": "component-reference-bottomsheet",
"keywords": [
"bottom-sheet",
"bottom",
"sheet",
"Bottom drawer",
"Mobile sheet"
],
"preview": {
"type": "image",
"src": "/catalog/bottomsheet-preview.png",
"alt": "BottomSheet preview with modal content opened from the bottom of the viewport."
},
"related": [],
"section": "components",
"tags": [
"category:feedback",
"type:component",
"behavior:blocking",
"behavior:disclosure"
],
"title": "BottomSheet"
},
{
"description": "Breadcrumbs integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-breadcrumb--docs",
"id": "library-integrations-reference-tanstack-router-breadcrumb",
"keywords": [
"tanstack-router",
"breadcrumbs",
"RouterBreadcrumbs",
"TanStack Router Breadcrumbs"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "library-integrations-reference-tanstack-router-breadcrumb--default"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "Breadcrumb"
},
{
"description": "Turns the current page hierarchy into compact parent links for backtracking across nested routes.",
"docsHref": "?path=/docs/component-reference-breadcrumbs--docs",
"id": "component-reference-breadcrumbs",
"keywords": [
"breadcrumbs",
"dynamic-breadcrumbs",
"dynamic",
"Breadcrumb trail",
"Breadcrumb navigation"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-breadcrumbs--default",
"zoom": 0.7
},
"related": [],
"section": "components",
"tags": ["category:navigation", "type:component", "behavior:navigation"],
"title": "Breadcrumbs"
},
{
"description": "Buttons allow users to take actions, and make choices, with a single tap.",
"docsHref": "?path=/docs/component-reference-button--docs",
"id": "component-reference-button",
"keywords": [
"action",
"cta",
"submit",
"confirm",
"trigger",
"Action button"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-button--default"
},
"related": [],
"section": "components",
"tags": [
"type:component",
"category:actions",
"behavior:selection",
"category:inputs"
],
"title": "Button"
},
{
"description": "Frames related content and actions in a reusable surface with consistent spacing and borders.",
"docsHref": "?path=/docs/component-reference-card--docs",
"id": "component-reference-card",
"keywords": ["card", "Content card", "Surface", "Panel"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-card--default"
},
"related": [],
"section": "components",
"tags": ["category:information", "type:component", "category:content"],
"title": "Card"
},
{
"description": "Present related content in a horizontally scrollable region with navigation controls.",
"docsHref": "?path=/docs/component-reference-carousel--docs",
"id": "component-reference-carousel",
"keywords": ["carousel", "Slider", "Content slider"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-carousel--default",
"zoom": 0.7
},
"related": [],
"section": "components",
"tags": ["type:component", "category:content", "behavior:selection"],
"title": "Carousel"
},
{
"description": "Lets users toggle a single boolean option in forms or settings.",
"docsHref": "?path=/docs/component-reference-checkbox--docs",
"id": "component-reference-checkbox",
"keywords": ["checkbox", "Tickbox"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-checkbox--primary"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:selection",
"behavior:editing"
],
"title": "Checkbox"
},
{
"description": "Combines a TanStack checkbox with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-checkboxfield--docs",
"id": "forms-reference-checkboxfield",
"keywords": [
"checkbox-field",
"tanstack-checkbox-field",
"tanstack",
"checkbox",
"field",
"TanStackCheckboxField",
"Form checkbox"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-checkboxfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "CheckboxField"
},
{
"description": "Groups related checkboxes so users can select multiple options from one set.",
"docsHref": "?path=/docs/component-reference-checkboxgroup--docs",
"id": "component-reference-checkboxgroup",
"keywords": [
"checkbox-group",
"checkbox",
"group",
"Multi-checkbox group",
"Checkbox list"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-checkboxgroup--default"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing"
],
"title": "CheckboxGroup"
},
{
"description": "Combines a TanStack checkbox group with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-checkboxgroupfield--docs",
"id": "forms-reference-checkboxgroupfield",
"keywords": [
"checkbox-group-field",
"tanstack-check-group-field",
"tanstack",
"check",
"group",
"field",
"TanStackCheckboxGroupField",
"Form checkbox group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-checkboxgroupfield--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "CheckboxGroupField"
},
{
"description": "Binds a checkbox group to TanStack Form state for selecting multiple values.",
"docsHref": "?path=/docs/forms-reference-checkboxgroupinput--docs",
"id": "forms-reference-checkboxgroupinput",
"keywords": [
"checkbox-group",
"tanstack-checkbox-group",
"tanstack",
"checkbox",
"group",
"TanStackCheckboxGroup",
"Bound checkbox group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-checkboxgroupinput--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "CheckboxGroupInput"
},
{
"description": "Binds a checkbox to TanStack Form state for a single boolean value.",
"docsHref": "?path=/docs/forms-reference-checkboxinput--docs",
"id": "forms-reference-checkboxinput",
"keywords": [
"checkbox",
"tanstack-checkbox",
"tanstack",
"TanStackCheckbox",
"Bound checkbox"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-checkboxinput--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "CheckboxInput"
},
{
"description": "Provides an accessible icon-only button for auxiliary actions.",
"docsHref": "?path=/docs/component-reference-circulariconbutton--docs",
"id": "component-reference-circulariconbutton",
"keywords": [
"icon-button",
"circular-icon-button",
"circular",
"icon",
"button",
"Round icon button",
"Circle button"
],
"preview": {
"type": "story",
"story": "enabled",
"storyId": "component-reference-circulariconbutton--enabled"
},
"related": [],
"section": "components",
"tags": ["status:experimental", "category:actions", "type:component"],
"title": "CircularIconButton"
},
{
"description": "Displays inline code, technical values, or short tokens with monospace styling.",
"docsHref": "?path=/docs/component-reference-code--docs",
"id": "component-reference-code",
"keywords": ["code", "InlineCode", "Code text"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-code--default"
},
"related": [],
"section": "components",
"tags": ["category:information", "type:primitive", "category:content"],
"title": "Code"
},
{
"description": "Creates disclosure sections for optional details without sending users to another page.",
"docsHref": "?path=/docs/component-reference-collapsible--docs",
"id": "component-reference-collapsible",
"keywords": ["collapsible", "Disclosure", "Expandable section"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-collapsible--default"
},
"related": [],
"section": "components",
"tags": [
"category:information",
"type:component",
"category:content",
"behavior:disclosure"
],
"title": "Collapsible"
},
{
"description": "Coordinates related disclosure sections as one accessible accordion with shared expanded state.",
"docsHref": "?path=/docs/component-reference-collapsiblegroup--docs",
"id": "component-reference-collapsiblegroup",
"keywords": [
"collapsible",
"accordion",
"disclosure",
"group",
"Disclosure group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-collapsiblegroup--default"
},
"related": ["component-reference-collapsible"],
"section": "components",
"tags": ["type:component", "category:information", "behavior:disclosure"],
"title": "CollapsibleGroup"
},
{
"description": "Data Grid with sorting, pagination, row selection, and custom cells; powered by Tanstack Table",
"docsHref": "?path=/docs/component-reference-datatable--docs",
"id": "component-reference-datatable",
"keywords": [
"data-table",
"category:tabular-data",
"table",
"Data grid",
"Smart table",
"TanStack table"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-datatable--default",
"zoom": 0.5
},
"related": [],
"section": "components",
"tags": ["category:tabular-data", "type:component", "behavior:selection"],
"title": "DataTable"
},
{
"description": "Provide contextual actions for selected table rows.",
"docsHref": "?path=/docs/component-reference-datatable-datatablebulkactions--docs",
"id": "component-reference-datatable-datatablebulkactions",
"keywords": [
"data-table",
"bulk-actions",
"selection",
"table",
"Bulk action toolbar",
"Selection actions"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-datatable-datatablebulkactions--default",
"zoom": 0.5
},
"principal": "component-reference-datatable",
"related": [],
"section": "components",
"tags": [
"category:tabular-data",
"type:component",
"behavior:multi-selection"
],
"title": "DataTableBulkActions"
},
{
"description": "Displays a calendar grid for selecting a single date, with controls for year and month selection",
"docsHref": "?path=/docs/component-reference-datecalendar--docs",
"id": "component-reference-datecalendar",
"keywords": [
"date-calendar",
"date",
"calendar",
"Single-date calendar",
"Calendar picker"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-datecalendar--default",
"zoom": 0.6
},
"related": [],
"section": "components",
"tags": ["type:component", "category:inputs", "behavior:editing"],
"title": "DateCalendar"
},
{
"description": "Lets users pick a date from an input-triggered calendar popover.",
"docsHref": "?path=/docs/component-reference-datepicker--docs",
"id": "component-reference-datepicker",
"keywords": [
"date-picker",
"date",
"picker",
"Calendar input",
"Date input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-datepicker--default"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:editing"],
"title": "DatePicker"
},
{
"description": "Combines a TanStack date picker with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-datepickerfield--docs",
"id": "forms-reference-datepickerfield",
"keywords": [
"date-picker-field",
"tanstack-date-picker-field",
"tanstack",
"date",
"picker",
"field",
"TanStackDatePickerField",
"Form date picker"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-datepickerfield--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "DatePickerField"
},
{
"description": "Binds a date picker input to TanStack Form state for single-date values.",
"docsHref": "?path=/docs/forms-reference-datepickerinput--docs",
"id": "forms-reference-datepickerinput",
"keywords": [
"date-picker",
"tanstack-date-picker",
"tanstack",
"date",
"picker",
"TanStackDatePicker",
"Bound date picker"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-datepickerinput--default",
"zoom": 0.8
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "DatePickerInput"
},
{
"description": "Displays a calendar grid for selecting a start and end date range.",
"docsHref": "?path=/docs/component-reference-daterangecalendar--docs",
"id": "component-reference-daterangecalendar",
"keywords": [
"date-range-calendar",
"date",
"range",
"calendar",
"Range calendar",
"Date interval calendar"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-daterangecalendar--default",
"zoom": 0.8
},
"related": [],
"section": "components",
"tags": ["type:component", "category:inputs", "behavior:editing"],
"title": "DateRangeCalendar"
},
{
"description": "Lets users pick a start and end date from an input-triggered calendar popover.",
"docsHref": "?path=/docs/component-reference-daterangepicker--docs",
"id": "component-reference-daterangepicker",
"keywords": [
"date-range-picker",
"date",
"range",
"picker",
"Date interval picker",
"Range picker"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-daterangepicker--default"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:editing"],
"title": "DateRangePicker"
},
{
"description": "Combines a TanStack date range picker with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-daterangepickerfield--docs",
"id": "forms-reference-daterangepickerfield",
"keywords": [
"date-range-picker-field",
"tanstack-date-range-picker-field",
"tanstack",
"date",
"range",
"picker",
"field",
"TanStackDateRangePickerField",
"Form date range picker"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-daterangepickerfield--default",
"zoom": 0.8
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "DateRangePickerField"
},
{
"description": "Binds a date range picker to TanStack Form state for start and end dates.",
"docsHref": "?path=/docs/forms-reference-daterangepickerinput--docs",
"id": "forms-reference-daterangepickerinput",
"keywords": [
"date-range-picker",
"tanstack-date-range-picker",
"tanstack",
"date",
"range",
"picker",
"TanStackDateRangePicker",
"Bound date range picker"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-daterangepickerinput--default",
"zoom": 0.8
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "DateRangePickerInput"
},
{
"description": "Displays name-value pairs for summaries, details, and structured read-only data.",
"docsHref": "?path=/docs/component-reference-definitionlist--docs",
"id": "component-reference-definitionlist",
"keywords": [
"definition-list",
"definition",
"list",
"Description list",
"Key-value list",
"Property list"
],
"preview": {
"type": "story",
"story": "horizontal",
"storyId": "component-reference-definitionlist--horizontal"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:tabular-data", "behavior:selection"],
"title": "DefinitionList"
},
{
"description": "Attaches concise definitions to terms so users can clarify domain language in context.",
"docsHref": "?path=/docs/component-reference-definitiontooltip--docs",
"id": "component-reference-definitiontooltip",
"keywords": [
"definition-tooltip",
"definition",
"tooltip",
"Glossary tooltip",
"Term tooltip"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-definitiontooltip--default"
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:component", "behavior:disclosure"],
"title": "DefinitionTooltip"
},
{
"description": "Dialogs show modal content that requires focused attention or a blocking decision.",
"docsHref": "?path=/docs/component-reference-dialog--docs",
"id": "component-reference-dialog",
"keywords": [
"modal",
"overlay",
"confirmation",
"blocking",
"prompt",
"Modal dialog",
"Confirmation dialog"
],
"preview": {
"type": "image",
"src": "/catalog/dialog-preview.png",
"alt": "Dialog preview with a centered modal, title, message, and two actions."
},
"related": [],
"section": "components",
"tags": [
"type:component",
"category:feedback",
"behavior:blocking",
"behavior:disclosure"
],
"title": "Dialog"
},
{
"description": "Explains an empty view and offers the next action when there is no content to show.",
"docsHref": "?path=/docs/component-reference-emptystate--docs",
"id": "component-reference-emptystate",
"keywords": [
"empty-state",
"empty",
"state",
"Blank slate",
"No-content state"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-emptystate--default"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:feedback"],
"title": "EmptyState"
},
{
"description": "Explains a failed view or request and gives users a clear recovery action.",
"docsHref": "?path=/docs/component-reference-errorstate--docs",
"id": "component-reference-errorstate",
"keywords": [
"error-state",
"error",
"state",
"Failure state",
"Error view"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-errorstate--default",
"zoom": 0.25
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:component", "behavior:validation"],
"title": "ErrorState"
},
{
"description": "Provides the atomic field wrapper for custom TanStack Form layouts with labels, help text, and feedback.",
"docsHref": "?path=/docs/forms-reference-field--docs",
"id": "forms-reference-field",
"keywords": [
"form-field",
"tanstack-form-field",
"tanstack",
"form",
"field",
"FormField",
"TanStackFormField",
"Field wrapper"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-field--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "Field"
},
{
"description": "Groups related form controls under one accessible legend.",
"docsHref": "?path=/docs/forms-reference-fieldset--docs",
"id": "forms-reference-fieldset",
"keywords": ["fieldset", "Form group", "Control group"],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-fieldset--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "Fieldset"
},
{
"description": "Defines one table filter with a trigger, operator, and custom value control.",
"docsHref": "?path=/docs/component-reference-filter--docs",
"id": "component-reference-filter",
"keywords": ["filter", "Data filter", "Column filter"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-filter--default"
},
"related": [],
"section": "components",
"tags": ["category:tabular-data", "type:component", "behavior:filtering"],
"title": "Filter"
},
{
"description": "Combine and manage multiple filters for narrowing table or list data.",
"docsHref": "?path=/docs/component-reference-filtertoolbar--docs",
"id": "component-reference-filtertoolbar",
"keywords": [
"filter-toolbar",
"filter",
"toolbar",
"Filter bar",
"Advanced filters"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-filtertoolbar--default"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:tabular-data", "behavior:filtering"],
"title": "FilterToolbar"
},
{
"description": "Arranges content in one dimension with Unity spacing, alignment, wrapping, and direction props.",
"docsHref": "?path=/docs/component-reference-flex--docs",
"id": "component-reference-flex",
"keywords": ["flex", "Flexbox", "Stack"],
"preview": {
"type": "story",
"story": "basic",
"storyId": "component-reference-flex--basic"
},
"related": [],
"section": "components",
"tags": ["category:layout", "type:primitive"],
"title": "Flex"
},
{
"description": "Display high-priority page actions in a responsive bottom toolbar for persistent actions",
"docsHref": "?path=/docs/component-reference-floatingactionbar--docs",
"id": "component-reference-floatingactionbar",
"keywords": [
"floating-action-bar",
"floating",
"action",
"bar",
"Sticky action bar",
"Bottom action bar"
],
"preview": {
"type": "story",
"story": "one-button",
"storyId": "component-reference-floatingactionbar--one-button"
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:component",
"category:actions",
"behavior:navigation"
],
"title": "FloatingActionBar"
},
{
"description": "Connects TanStack Form state to submission, validation, and native form semantics.",
"docsHref": "?path=/docs/forms-reference-form--docs",
"id": "forms-reference-form",
"keywords": [
"form",
"tanstack-form",
"tanstack",
"TanStackForm",
"Form root"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "forms-reference-form--primary",
"zoom": 0.8
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "Form"
},
{
"description": "FormContextualLink integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-formcontextuallink--docs",
"id": "library-integrations-reference-tanstack-router-formcontextuallink",
"keywords": [
"tanstack-router",
"form-contextual-link",
"form",
"contextual",
"link",
"RouterFormContextualLink",
"TanStack Router contextual link"
],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-formcontextuallink--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": ["type:integration", "category:inputs", "behavior:navigation"],
"title": "FormContextualLink"
},
{
"description": "Covers the full page with a loading state while an app view is preparing content.",
"docsHref": "?path=/docs/component-reference-fullpageloader--docs",
"id": "component-reference-fullpageloader",
"keywords": [
"full-page-loader",
"full",
"page",
"loader",
"Page loader",
"Loading screen"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-fullpageloader--default"
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:pattern", "behavior:async"],
"title": "FullPageLoader"
},
{
"description": "Structures step-by-step flows with funnel navigation, content, and action areas.",
"docsHref": "?path=/docs/component-reference-funnellayout--docs",
"id": "component-reference-funnellayout",
"keywords": [
"funnel-layout",
"funnel",
"layout",
"Wizard layout",
"Multi-step form layout"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-funnellayout--default"
},
"related": [],
"section": "patterns",
"tags": ["category:layout", "behavior:editing", "type:pattern"],
"title": "FunnelLayout"
},
{
"description": "Creates responsive two-dimensional layouts using Unity grid primitives.",
"docsHref": "?path=/docs/component-reference-grid--docs",
"id": "component-reference-grid",
"keywords": ["grid", "CSS Grid", "Grid layout"],
"preview": {
"type": "story",
"story": "basic",
"storyId": "component-reference-grid--basic"
},
"related": [],
"section": "components",
"tags": ["category:layout", "type:primitive"],
"title": "Grid"
},
{
"description": "Provides an accessible icon-only button for compact actions.",
"docsHref": "?path=/docs/component-reference-iconbutton--docs",
"id": "component-reference-iconbutton",
"keywords": [
"icon-button",
"icon",
"button",
"Icon-only button",
"Square icon button"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-iconbutton--default"
},
"related": [],
"section": "components",
"tags": ["category:actions", "type:component"],
"title": "IconButton"
},
{
"description": "IconButtonLink provides type-safe TanStack Router navigation with the IconButton appearance.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-iconbuttonlink--docs",
"id": "library-integrations-reference-tanstack-router-iconbuttonlink",
"keywords": [
"tanstack-router",
"icon-button-link",
"icon link",
"IconButtonLink"
],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-iconbuttonlink--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "IconButtonLink"
},
{
"description": "Builds editable read/write field rows connected to TanStack Form values.",
"docsHref": "?path=/docs/forms-reference-inlinefield--docs",
"id": "forms-reference-inlinefield",
"keywords": [
"inline-field",
"inline",
"field",
"Inline edit",
"Editable field"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-inlinefield--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:fields",
"behavior:editing",
"behavior:validation"
],
"title": "InlineField"
},
{
"description": "Groups inline editable fields for dense read-and-edit forms backed by TanStack Form.",
"docsHref": "?path=/docs/forms-reference-inlinefieldgroup--docs",
"id": "forms-reference-inlinefieldgroup",
"keywords": [
"inline-field-group",
"inline",
"field",
"group",
"Inline edit group",
"Editable field group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-inlinefieldgroup--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:fields",
"behavior:multi-selection",
"behavior:editing",
"behavior:validation"
],
"title": "InlineFieldGroup"
},
{
"description": "Provides the plain text input base with adornments, validation states, and native input props.",
"docsHref": "?path=/docs/component-reference-input--docs",
"id": "component-reference-input",
"keywords": ["input", "Base input", "Raw input", "Text input primitive"],
"preview": {
"type": "story",
"story": "empty",
"storyId": "component-reference-input--empty"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:editing"],
"title": "Input"
},
{
"description": "InteractiveAvatar combines an actionable avatar with a tooltip for profile and entity actions.",
"docsHref": "?path=/docs/component-reference-avatar-interactiveavatar--docs",
"id": "component-reference-avatar-interactiveavatar",
"keywords": [
"avatar",
"interactive",
"actionable",
"tooltip",
"profile",
"button",
"press",
"focus",
"hover",
"keyboard",
"popover"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-avatar-interactiveavatar--default"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:content", "behavior:disclosure"],
"title": "InteractiveAvatar"
},
{
"description": "Labels a form control with required or optional indicators and accessible text styling.",
"docsHref": "?path=/docs/component-reference-label--docs",
"id": "component-reference-label",
"keywords": ["label", "Form label", "Field label"],
"preview": {
"type": "story",
"story": "is-required",
"storyId": "component-reference-label--is-required"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:editing"],
"title": "Label"
},
{
"description": "Styles navigation anchors for routes or external destinations without button affordances.",
"docsHref": "?path=/docs/component-reference-link--docs",
"id": "component-reference-link",
"keywords": [
"link",
"raw-link",
"raw",
"RawLink",
"Anchor link",
"Hyperlink"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-link--default"
},
"related": [],
"section": "components",
"tags": ["category:navigation", "type:component", "behavior:navigation"],
"title": "Link"
},
{
"description": "Link integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-link--docs",
"id": "library-integrations-reference-tanstack-router-link",
"keywords": ["tanstack-router", "link", "RouterLink", "TanStack Link"],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-link--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "Link"
},
{
"description": "Gives navigation links button styling when the action should stand out as a primary path.",
"docsHref": "?path=/docs/component-reference-linkbutton--docs",
"id": "component-reference-linkbutton",
"keywords": [
"link-button",
"raw-link-button",
"raw",
"link",
"button",
"RawLinkButton",
"Button link",
"Anchor button"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-linkbutton--default"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:actions", "behavior:navigation"],
"title": "LinkButton"
},
{
"description": "LinkButton integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-linkbutton--docs",
"id": "library-integrations-reference-tanstack-router-linkbutton",
"keywords": [
"tanstack-router",
"link-button",
"link",
"button",
"RouterLinkButton",
"TanStack Link Button"
],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-linkbutton--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "LinkButton"
},
{
"description": "Displays navigable lists with sections, item states, labels, and supporting text.",
"docsHref": "?path=/docs/component-reference-listview--docs",
"id": "component-reference-listview",
"keywords": [
"list-view",
"list",
"view",
"Navigation list",
"Action list"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-listview--example-documents-list"
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:component",
"behavior:selection",
"behavior:navigation"
],
"title": "ListView"
},
{
"description": "ListView integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-listview--docs",
"id": "library-integrations-reference-tanstack-router-listview",
"keywords": [
"tanstack-router",
"list-view",
"list",
"view",
"RouterListView",
"TanStack Router ListView"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "library-integrations-reference-tanstack-router-listview--primary"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation",
"behavior:selection"
],
"title": "ListView"
},
{
"description": "Collects contextual actions in a keyboard-accessible popover menu anchored to a trigger.",
"docsHref": "?path=/docs/component-reference-menu--docs",
"id": "component-reference-menu",
"keywords": ["menu", "Dropdown menu", "Action menu", "Context menu"],
"preview": {
"type": "image",
"src": "/catalog/menu-preview.png",
"alt": "Menu preview with a trigger and open list of contextual actions."
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:component",
"behavior:selection",
"behavior:disclosure",
"behavior:navigation"
],
"title": "Menu"
},
{
"description": "MenuItem integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-menuitem--docs",
"id": "library-integrations-reference-tanstack-router-menuitem",
"keywords": [
"tanstack-router",
"menu-item",
"menu",
"item",
"RouterMenuItem",
"Navigation menu item"
],
"preview": {
"type": "story",
"story": "basic-menu-navigation",
"storyId": "library-integrations-reference-tanstack-router-menuitem--basic-menu-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "MenuItem"
},
{
"description": "MultiSelect lets users choose multiple options from a dropdown list with keyboard navigation.",
"docsHref": "?path=/docs/component-reference-multiselect--docs",
"id": "component-reference-multiselect",
"keywords": [
"dropdown",
"combobox",
"multiple choice",
"tags",
"filter",
"Multi-select dropdown",
"Multiple combobox",
"Tag picker"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-multiselect--primary"
},
"related": ["forms-reference-multiselectfield"],
"section": "components",
"tags": [
"type:component",
"category:inputs",
"behavior:multi-selection",
"behavior:filtering",
"behavior:selection",
"behavior:editing"
],
"title": "MultiSelect"
},
{
"description": "MultiSelectField combines MultiSelect with TanStack Form field labeling, feedback, and validation.",
"docsHref": "?path=/docs/forms-reference-multiselectfield--docs",
"id": "forms-reference-multiselectfield",
"keywords": [
"form field",
"tanstack form",
"dropdown",
"multiple choice",
"validation",
"TanStackMultiSelectField",
"Form multi-select"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "forms-reference-multiselectfield--primary"
},
"principal": "component-reference-multiselect",
"related": ["component-reference-multiselect"],
"section": "forms",
"tags": [
"type:form-control",
"category:fields",
"behavior:multi-selection",
"behavior:validation",
"behavior:selection",
"behavior:editing"
],
"title": "MultiSelectField"
},
{
"description": "Binds a multi-select control to TanStack Form state for choosing multiple options.",
"docsHref": "?path=/docs/forms-reference-multiselectinput--docs",
"id": "forms-reference-multiselectinput",
"keywords": [
"multi-select",
"story-tanstack-multi-select",
"story",
"tanstack",
"multi",
"select",
"TanStackMultiSelect",
"Bound multi-select"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "forms-reference-multiselectinput--primary"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "MultiSelectInput"
},
{
"description": "Structures app navigation lists with active, disabled, and nested item states.",
"docsHref": "?path=/docs/component-reference-nav--docs",
"id": "component-reference-nav",
"keywords": ["nav", "Navigation list", "Sidebar nav"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-nav--primary"
},
"related": [],
"section": "components",
"tags": ["category:navigation", "type:component", "behavior:navigation"],
"title": "Nav"
},
{
"description": "NavItem integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-navitem--docs",
"id": "library-integrations-reference-tanstack-router-navitem",
"keywords": [
"tanstack-router",
"nav-item",
"nav",
"item",
"RouterNavItem",
"Navigation item"
],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-navitem--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "NavItem"
},
{
"description": "Presents a navigational destination as a card with title, description, and optional media.",
"docsHref": "?path=/docs/component-reference-navigationcard--docs",
"id": "component-reference-navigationcard",
"keywords": [
"navigation-card",
"raw-navigation-card",
"raw",
"navigation",
"card",
"RawNavigationCard",
"Clickable card",
"Link card"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-navigationcard--default"
},
"related": [],
"section": "components",
"tags": ["category:navigation", "type:component", "behavior:navigation"],
"title": "NavigationCard"
},
{
"description": "NavigationCard integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-navigationcard--docs",
"id": "library-integrations-reference-tanstack-router-navigationcard",
"keywords": [
"tanstack-router",
"navigation-card",
"category:navigation",
"card",
"RouterNavigationCard",
"Router link card"
],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-navigationcard--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "NavigationCard"
},
{
"description": "Combines a TanStack number input with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-numberfield--docs",
"id": "forms-reference-numberfield",
"keywords": [
"number-field",
"tanstack-number-field",
"tanstack",
"number",
"field",
"TanStackNumberField",
"Form number input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-numberfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "NumberField"
},
{
"description": "Accepts and formats numeric values, with validation states, and native number input behavior.",
"docsHref": "?path=/docs/component-reference-numberinput--docs",
"id": "component-reference-numberinput",
"keywords": [
"number-input",
"number",
"input",
"Numeric input",
"Quantity input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-numberinput--default"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:editing"],
"title": "NumberInput"
},
{
"description": "Binds a numeric input to TanStack Form state for number values.",
"docsHref": "?path=/docs/forms-reference-numberinput--docs",
"id": "forms-reference-numberinput",
"keywords": [
"number-input",
"tanstack-number-input",
"tanstack",
"number",
"input",
"TanStackNumberInput",
"Bound number input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-numberinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "NumberInput"
},
{
"description": "Provides a page shell with header, content, and action regions for app screens.",
"docsHref": "?path=/docs/component-reference-page--docs",
"id": "component-reference-page",
"keywords": ["page", "PageLayout", "Page shell"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-page--with-heading",
"zoom": 0.7
},
"related": [],
"section": "patterns",
"tags": ["category:layout", "type:pattern"],
"title": "Page"
},
{
"description": "Lets users move through paginated data with page links, next and previous controls, and item counts.",
"docsHref": "?path=/docs/component-reference-pagination--docs",
"id": "component-reference-pagination",
"keywords": [
"pagination",
"story-pagination",
"story",
"Pager",
"Page navigation"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-pagination--default"
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:component",
"behavior:selection",
"behavior:navigation"
],
"title": "Pagination"
},
{
"description": "PaginationLink integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-pagination--docs",
"id": "library-integrations-reference-tanstack-router-pagination",
"keywords": [
"tanstack-router",
"pagination-link",
"pagination",
"link",
"RouterPagination",
"PaginationLink"
],
"preview": {
"type": "story",
"story": "basic-navigation",
"storyId": "library-integrations-reference-tanstack-router-pagination--basic-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "Pagination"
},
{
"description": "Combines a TanStack password input with label, rules, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-passwordfield--docs",
"id": "forms-reference-passwordfield",
"keywords": [
"password-field",
"tanstack-password-field",
"tanstack",
"password",
"field",
"TanStackPasswordField",
"Form password input"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "forms-reference-passwordfield--primary"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "PasswordField"
},
{
"description": "Displays PayFit brand marks consistently across product surfaces and themes.",
"docsHref": "?path=/docs/component-reference-payfitbrand--docs",
"id": "component-reference-payfitbrand",
"keywords": [
"payfit-brand",
"pay-fit-brand",
"pay",
"fit",
"brand",
"PayFit logo",
"Brand mark"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-payfitbrand--primary"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:content"],
"title": "PayFitBrand"
},
{
"description": "Displays the PayFit pre-production brand mark for non-production environments (internal use only).",
"docsHref": "?path=/docs/component-reference-payfitbrandpreprod--docs",
"id": "component-reference-payfitbrandpreprod",
"keywords": [
"payfit-brand",
"pay-fit-brand-preprod",
"pay",
"fit",
"brand",
"preprod",
"PayFit preprod logo",
"Preproduction brand mark"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-payfitbrandpreprod--primary"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:content"],
"title": "PayFitBrandPreprod"
},
{
"description": "Combines a TanStack phone input with label, country selection, helper text, feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-phonenumberfield--docs",
"id": "forms-reference-phonenumberfield",
"keywords": [
"phone-number-field",
"story-tanstack-phone-number-field",
"story",
"tanstack",
"phone",
"number",
"field",
"TanStackPhoneNumberField",
"Form phone number input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-phonenumberfield--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:fields",
"behavior:editing",
"behavior:validation"
],
"title": "PhoneNumberField"
},
{
"description": "Captures international phone numbers with country selection, formatting, and validation states.",
"docsHref": "?path=/docs/component-reference-phonenumberinput--docs",
"id": "component-reference-phonenumberinput",
"keywords": [
"phone-number",
"phone-number-input",
"phone",
"number",
"input",
"Phone input",
"Telephone input",
"International phone input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-phonenumberinput--default"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:inputs", "behavior:editing"],
"title": "PhoneNumberInput"
},
{
"description": "Binds a phone number input to TanStack Form state with country-aware formatting.",
"docsHref": "?path=/docs/forms-reference-phonenumberinput--docs",
"id": "forms-reference-phonenumberinput",
"keywords": [
"phone-number",
"story-tanstack-phone-number-input",
"story",
"tanstack",
"phone",
"number",
"input",
"TanStackPhoneNumberInput",
"Bound phone number input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-phonenumberinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "PhoneNumberInput"
},
{
"description": "Displays compact labels for selected filters, statuses, or removable tokens.",
"docsHref": "?path=/docs/component-reference-pill--docs",
"id": "component-reference-pill",
"keywords": ["pill", "Chip", "Tag", "Token"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-pill--default"
},
"related": [],
"section": "components",
"tags": ["category:information", "type:component", "category:feedback"],
"title": "Pill"
},
{
"description": "Positions non-modal contextual content next to a trigger.",
"docsHref": "?path=/docs/component-reference-popover--docs",
"id": "component-reference-popover",
"keywords": ["popover", "Flyout", "Floating panel"],
"preview": {
"type": "image",
"src": "/catalog/popover-preview.png",
"alt": "Popover preview with contextual content anchored to a trigger button."
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:component", "behavior:disclosure"],
"title": "Popover"
},
{
"description": "Communicates completion for tasks, uploads, or workflows with determinate and indeterminate states.",
"docsHref": "?path=/docs/component-reference-progressbar--docs",
"id": "component-reference-progressbar",
"keywords": [
"progress-bar",
"progress",
"bar",
"Progress indicator",
"Loading bar"
],
"preview": {
"type": "story",
"story": "value",
"storyId": "component-reference-progressbar--value",
"zoom": 0.7
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:component", "behavior:async"],
"title": "ProgressBar"
},
{
"description": "Presents promotional or announcement content in a branded modal dialog.",
"docsHref": "?path=/docs/component-reference-promodialog--docs",
"id": "component-reference-promodialog",
"keywords": [
"promo-dialog",
"promo",
"dialog",
"Announcement modal",
"Marketing modal"
],
"preview": {
"type": "image",
"src": "/catalog/promodialog-preview.png",
"alt": "PromoDialog preview with illustration-led promotional modal content."
},
"related": [],
"section": "components",
"tags": [
"type:component",
"category:feedback",
"behavior:blocking",
"behavior:disclosure"
],
"title": "PromoDialog"
},
{
"description": "Let users choose exactly one option from a set of related options.",
"docsHref": "?path=/docs/component-reference-radiobuttongroup--docs",
"id": "component-reference-radiobuttongroup",
"keywords": [
"radio-button-group",
"radio",
"button",
"group",
"Radio group",
"Single-choice group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-radiobuttongroup--default",
"zoom": 0.8
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing"
],
"title": "RadioButtonGroup"
},
{
"description": "Combines a TanStack radio group with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-radiobuttongroupfield--docs",
"id": "forms-reference-radiobuttongroupfield",
"keywords": [
"radio-button-group-field",
"tanstack-radio-button-group-field",
"tanstack",
"radio",
"button",
"group",
"field",
"TanStackRadioButtonGroupField",
"Form radio group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-radiobuttongroupfield--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "RadioButtonGroupField"
},
{
"description": "Binds a radio group to TanStack Form state for choosing one option.",
"docsHref": "?path=/docs/forms-reference-radiobuttoninput--docs",
"id": "forms-reference-radiobuttoninput",
"keywords": [
"radio-button-group",
"tanstack-radio-button-group",
"tanstack",
"radio",
"button",
"group",
"TanStackRadioButtonGroup",
"Bound radio group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-radiobuttoninput--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "RadioButtonInput"
},
{
"description": "Captures query text for search and filtering flows with clear affordances.",
"docsHref": "?path=/docs/component-reference-search--docs",
"id": "component-reference-search",
"keywords": ["search", "SearchInput", "Search field", "Search box"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-search--default"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:filtering",
"behavior:editing"
],
"title": "Search"
},
{
"description": "Groups related toggle buttons so users can switch modes or select one or multiple options.",
"docsHref": "?path=/docs/component-reference-segmentedbuttongroup--docs",
"id": "component-reference-segmentedbuttongroup",
"keywords": [
"segmented-button-group",
"segmented",
"button",
"group",
"Segmented control",
"Toggle button group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-segmentedbuttongroup--default"
},
"related": [],
"section": "components",
"tags": [
"type:component",
"category:actions",
"behavior:multi-selection"
],
"title": "SegmentedButtonGroup"
},
{
"description": "Lets users choose one option from a trigger-controlled listbox.",
"docsHref": "?path=/docs/component-reference-select--docs",
"id": "component-reference-select",
"keywords": ["select", "Dropdown", "Select menu", "Listbox select"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-select--default"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:selection",
"behavior:editing"
],
"title": "Select"
},
{
"description": "Combines a TanStack select with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-selectfield--docs",
"id": "forms-reference-selectfield",
"keywords": [
"select-field",
"tanstack-select-field",
"tanstack",
"select",
"field",
"TanStackSelectField",
"Form select"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-selectfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectField"
},
{
"description": "Binds a select control to TanStack Form state for choosing one option.",
"docsHref": "?path=/docs/forms-reference-selectinput--docs",
"id": "forms-reference-selectinput",
"keywords": [
"select",
"tanstack-select",
"tanstack",
"TanStackSelect",
"Bound select"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "forms-reference-selectinput--primary",
"zoom": 0.8
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectInput"
},
{
"description": "Powers selectable option lists for selects, comboboxes, and picker-style controls.",
"docsHref": "?path=/docs/component-reference-selectlist--docs",
"id": "component-reference-selectlist",
"keywords": ["select-list", "select", "list", "Listbox", "Option list"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-selectlist--default"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:selection"],
"title": "SelectList"
},
{
"description": "Presents 1-5 related choices as buttons so users can select one or multiple options.",
"docsHref": "?path=/docs/component-reference-selectablebuttongroup--docs",
"id": "component-reference-selectablebuttongroup",
"keywords": [
"selectable-button-group",
"selectable",
"button",
"group",
"Button choice group",
"Choice buttons"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-selectablebuttongroup--primary"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing"
],
"title": "SelectableButtonGroup"
},
{
"description": "Combines a TanStack selectable button group with label, helper text, feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-selectablebuttongroupfield--docs",
"id": "forms-reference-selectablebuttongroupfield",
"keywords": [
"selectable-button-group-field",
"tanstack-selectable-button-group-field",
"tanstack",
"selectable",
"button",
"group",
"field",
"TanStackSelectableButtonGroupField",
"Form button choice group"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "forms-reference-selectablebuttongroupfield--primary"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectableButtonGroupField"
},
{
"description": "Binds a selectable button group to TanStack Form state for single or multiple choices.",
"docsHref": "?path=/docs/forms-reference-selectablebuttongroupinput--docs",
"id": "forms-reference-selectablebuttongroupinput",
"keywords": [
"selectable-button-group",
"tanstack-selectable-button-group",
"tanstack",
"selectable",
"button",
"group",
"TanStackSelectableButtonGroup",
"Bound button choice group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-selectablebuttongroupinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectableButtonGroupInput"
},
{
"description": "Combines TanStack selectable checkbox cards with label, helper text, feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-selectablecardcheckboxgroupfield--docs",
"id": "forms-reference-selectablecardcheckboxgroupfield",
"keywords": [
"selectable-card-checkbox-group-field",
"tanstack-selectable-card-checkbox-group-field",
"tanstack",
"selectable",
"card",
"checkbox",
"group",
"field",
"TanStackSelectableCardCheckboxGroupField",
"Multi-select card field"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-selectablecardcheckboxgroupfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectableCardCheckboxGroupField"
},
{
"description": "SelectableCardCheckboxGroupInput is a TanStack Form bound input for selecting multiple card options.",
"docsHref": "?path=/docs/forms-reference-selectablecardcheckboxgroupinput--docs",
"id": "forms-reference-selectablecardcheckboxgroupinput",
"keywords": [
"selectable-card-checkbox-group",
"tanstack-selectable-card-checkbox-group",
"checkbox",
"cards",
"TanStackSelectableCardCheckboxGroup",
"Checkbox cards",
"Multi-select cards"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-selectablecardcheckboxgroupinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectableCardCheckboxGroupInput"
},
{
"description": "Combines TanStack selectable radio cards with label, helper text, feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-selectablecardradiogroupfield--docs",
"id": "forms-reference-selectablecardradiogroupfield",
"keywords": [
"selectable-card-radio-group-field",
"tanstack-selectable-card-radio-group-field",
"tanstack",
"selectable",
"card",
"radio",
"group",
"field",
"TanStackSelectableCardRadioGroupField",
"Single-select card field"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-selectablecardradiogroupfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectableCardRadioGroupField"
},
{
"description": "SelectableCardRadioGroupInput is a TanStack Form bound input for selecting one card option.",
"docsHref": "?path=/docs/forms-reference-selectablecardradiogroupinput--docs",
"id": "forms-reference-selectablecardradiogroupinput",
"keywords": [
"selectable-card-radio-group",
"tanstack-selectable-card-radio-group",
"radio",
"cards",
"TanStackSelectableCardRadioGroup",
"Radio cards",
"Single-select cards"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-selectablecardradiogroupinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "SelectableCardRadioGroupInput"
},
{
"description": "Opens supporting content or workflows in a panel anchored to the side of the viewport.",
"docsHref": "?path=/docs/component-reference-sidepanel--docs",
"id": "component-reference-sidepanel",
"keywords": [
"side-panel",
"side",
"panel",
"Drawer",
"Side sheet",
"Slide-over"
],
"preview": {
"type": "image",
"src": "/catalog/sidepanel-preview.png",
"alt": "SidePanel preview with a right-side workflow panel over page content."
},
"related": [],
"section": "components",
"tags": [
"category:feedback",
"type:component",
"behavior:blocking",
"behavior:disclosure"
],
"title": "SidePanel"
},
{
"description": "Non-interactive placeholders for content whose final layout is known while it loads.",
"docsHref": "?path=/docs/component-reference-skeleton--docs",
"id": "component-reference-skeleton",
"keywords": ["skeleton", "loading", "placeholder", "shimmer"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-skeleton--default"
},
"related": [],
"section": "components",
"tags": ["category:feedback", "behavior:async", "type:component"],
"title": "Skeleton"
},
{
"description": "Adds keyboard shortcuts for jumping directly to important page regions.",
"docsHref": "?path=/docs/component-reference-skiplinks--docs",
"id": "component-reference-skiplinks",
"keywords": [
"skip-links",
"skip",
"links",
"Skip navigation",
"Skip to content"
],
"preview": {
"type": "image",
"src": "/catalog/skiplinks-preview.png",
"alt": "SkipLinks preview with keyboard navigation links visible above page content."
},
"related": [],
"section": "components",
"tags": ["category:navigation", "type:component", "behavior:navigation"],
"title": "SkipLinks"
},
{
"description": "Indicates loading when progress is unknown or a short operation is pending.",
"docsHref": "?path=/docs/component-reference-spinner--docs",
"id": "component-reference-spinner",
"keywords": [
"spinner",
"Loading indicator",
"Circular loader",
"Activity indicator"
],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-spinner--primary"
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:component", "behavior:async"],
"title": "Spinner"
},
{
"description": "Guides users through ordered flows by marking completed, current, and upcoming steps.",
"docsHref": "?path=/docs/component-reference-stepper--docs",
"id": "component-reference-stepper",
"keywords": ["stepper", "Steps", "Wizard progress", "Progress steps"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-stepper--primary"
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:pattern",
"category:content",
"behavior:navigation"
],
"title": "Stepper"
},
{
"description": "Provides accessible table primitives for custom tabular layouts and row interactions.",
"docsHref": "?path=/docs/component-reference-table--docs",
"id": "component-reference-table",
"keywords": ["table", "Table primitives", "Basic table", "Static table"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-table--default",
"zoom": 0.5
},
"related": [],
"section": "components",
"tags": ["category:tabular-data", "type:component", "behavior:selection"],
"title": "Table"
},
{
"description": "Switches between related panels while keeping one panel visible at a time.",
"docsHref": "?path=/docs/component-reference-tabs--docs",
"id": "component-reference-tabs",
"keywords": ["tabs", "Tab list", "Tabbed interface"],
"preview": {
"type": "story",
"story": "primary",
"storyId": "component-reference-tabs--primary"
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:component",
"behavior:selection",
"behavior:navigation"
],
"title": "Tabs"
},
{
"description": "Tabs integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-tabs--docs",
"id": "library-integrations-reference-tanstack-router-tabs",
"keywords": ["tanstack-router", "tabs", "RouterTabs", "Route tabs"],
"preview": {
"type": "story",
"story": "basic-tab-navigation",
"storyId": "library-integrations-reference-tanstack-router-tabs--basic-tab-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "Tabs"
},
{
"description": "Displays task-oriented navigation and actions with a nested menu structure.",
"docsHref": "?path=/docs/component-reference-taskmenu--docs",
"id": "component-reference-taskmenu",
"keywords": [
"task-menu",
"task",
"menu",
"Task navigation",
"Nested task menu"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-taskmenu--default",
"zoom": 0.5
},
"related": [],
"section": "components",
"tags": [
"category:navigation",
"type:component",
"behavior:selection",
"behavior:disclosure",
"behavior:navigation"
],
"title": "TaskMenu"
},
{
"description": "Task integrates Unity with TanStack Router navigation patterns.",
"docsHref": "?path=/docs/library-integrations-reference-tanstack-router-taskmenu--docs",
"id": "library-integrations-reference-tanstack-router-taskmenu",
"keywords": [
"tanstack-router",
"task",
"RouterTaskMenu",
"Router task navigation"
],
"preview": {
"type": "story",
"story": "basic-task-navigation",
"storyId": "library-integrations-reference-tanstack-router-taskmenu--basic-task-navigation"
},
"related": [],
"section": "integrations",
"tags": [
"type:integration",
"category:navigation",
"behavior:navigation"
],
"title": "TaskMenu"
},
{
"description": "Applies Unity typography variants, colors, truncation, and line clamping to semantic text.",
"docsHref": "?path=/docs/component-reference-text--docs",
"id": "component-reference-text",
"keywords": ["text", "Typography", "Text primitive"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-text--default"
},
"related": [],
"section": "components",
"tags": ["category:foundations", "type:primitive"],
"title": "Text"
},
{
"description": "Captures longer free-form text with Unity styling and controlled resize behavior.",
"docsHref": "?path=/docs/component-reference-textarea--docs",
"id": "component-reference-textarea",
"keywords": ["text-area", "text", "area", "Textarea", "Multiline input"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-textarea--default"
},
"related": [],
"section": "components",
"tags": ["category:inputs", "type:component", "behavior:editing"],
"title": "TextArea"
},
{
"description": "Binds a multi-line text area to TanStack Form state.",
"docsHref": "?path=/docs/forms-reference-textareainput--docs",
"id": "forms-reference-textareainput",
"keywords": [
"text-area",
"tanstack-text-area",
"tanstack",
"text",
"area",
"TanStackTextArea",
"Bound textarea"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-textareainput--default",
"zoom": 0.7
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "TextAreaInput"
},
{
"description": "Combines a TanStack text input with label, helper text, validation feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-textfield--docs",
"id": "forms-reference-textfield",
"keywords": [
"text-field",
"tanstack-text-field",
"tanstack",
"text",
"field",
"TanStackTextField",
"Form text field"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-textfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:editing",
"behavior:validation"
],
"title": "TextField"
},
{
"description": "Binds a text input to TanStack Form state for text, email, search, password, tel, and URL values.",
"docsHref": "?path=/docs/forms-reference-textinput--docs",
"id": "forms-reference-textinput",
"keywords": [
"input",
"tanstack-input",
"tanstack",
"TanStackInput",
"Bound text input"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-textinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:editing",
"behavior:validation"
],
"title": "TextInput"
},
{
"description": "Arranges chronological events or milestones with markers, labels, and supporting content.",
"docsHref": "?path=/docs/component-reference-timeline--docs",
"id": "component-reference-timeline",
"keywords": ["timeline", "Event timeline", "Activity feed", "History"],
"preview": {
"type": "story",
"story": "vertical-default",
"storyId": "component-reference-timeline--vertical-default"
},
"related": [],
"section": "components",
"tags": ["type:pattern", "category:content"],
"title": "Timeline"
},
{
"description": "Lets users turn a single setting on or off.",
"docsHref": "?path=/docs/component-reference-toggleswitch--docs",
"id": "component-reference-toggleswitch",
"keywords": ["toggle-switch", "toggle", "switch"],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-toggleswitch--default"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:selection",
"behavior:editing"
],
"title": "ToggleSwitch"
},
{
"description": "Combines a TanStack toggle switch with label, helper text, feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-toggleswitchfield--docs",
"id": "forms-reference-toggleswitchfield",
"keywords": [
"toggle-switch-field",
"tanstack-toggle-switch-field",
"tanstack",
"toggle",
"switch",
"field",
"TanStackToggleSwitchField",
"Form switch"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-toggleswitchfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "ToggleSwitchField"
},
{
"description": "Groups related switches for editing several boolean settings together.",
"docsHref": "?path=/docs/component-reference-toggleswitchgroup--docs",
"id": "component-reference-toggleswitchgroup",
"keywords": [
"toggle-switch-group",
"toggle",
"switch",
"group",
"Switch group",
"Settings toggles"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "component-reference-toggleswitchgroup--default"
},
"related": [],
"section": "components",
"tags": [
"category:inputs",
"type:component",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing"
],
"title": "ToggleSwitchGroup"
},
{
"description": "Combines a TanStack toggle switch group with label, helper text, feedback, and form state.",
"docsHref": "?path=/docs/forms-reference-toggleswitchgroupfield--docs",
"id": "forms-reference-toggleswitchgroupfield",
"keywords": [
"toggle-switch-group-field",
"tanstack-toggle-switch-group-field",
"tanstack",
"toggle",
"switch",
"group",
"field",
"TanStackToggleSwitchGroupField",
"Form switch group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-toggleswitchgroupfield--default"
},
"related": [],
"section": "forms",
"tags": [
"category:fields",
"type:form-control",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "ToggleSwitchGroupField"
},
{
"description": "Binds a toggle switch group to TanStack Form state for several boolean values.",
"docsHref": "?path=/docs/forms-reference-toggleswitchgroupinput--docs",
"id": "forms-reference-toggleswitchgroupinput",
"keywords": [
"toggle-switch-group",
"tanstack-toggle-switch-group",
"tanstack",
"toggle",
"switch",
"group",
"TanStackToggleSwitchGroup",
"Bound switch group"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-toggleswitchgroupinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:multi-selection",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "ToggleSwitchGroupInput"
},
{
"description": "Binds a toggle switch to TanStack Form state for a boolean value.",
"docsHref": "?path=/docs/forms-reference-toggleswitchinput--docs",
"id": "forms-reference-toggleswitchinput",
"keywords": [
"toggle-switch",
"tanstack-toggle-switch",
"tanstack",
"toggle",
"switch",
"TanStackToggleSwitch",
"Bound switch"
],
"preview": {
"type": "story",
"story": "default",
"storyId": "forms-reference-toggleswitchinput--default"
},
"related": [],
"section": "forms",
"tags": [
"type:form-control",
"category:inputs",
"behavior:selection",
"behavior:editing",
"behavior:validation"
],
"title": "ToggleSwitchInput"
},
{
"description": "Adds short contextual help to a trigger on hover or focus without changing the page layout.",
"docsHref": "?path=/docs/component-reference-tooltip--docs",
"id": "component-reference-tooltip",
"keywords": ["tooltip", "Hint", "Hover help"],
"preview": {
"type": "image",
"src": "/catalog/tooltip-preview.png",
"alt": "Tooltip preview with short contextual help displayed above a trigger."
},
"related": [],
"section": "components",
"tags": ["category:feedback", "type:component", "behavior:disclosure"],
"title": "Tooltip"
},
{
"description": "Displays transient feedback messages for success, error, warning, or information.",
"docsHref": "?path=/docs/component-reference-toast-unitytoast--docs",
"id": "component-reference-toast-unitytoast",
"keywords": [
"toast",
"unity-toast",
"unity",
"Snackbar",
"Notification toast"
],
"preview": {
"type": "story",
"story": "without-content",
"storyId": "component-reference-toast-unitytoast--without-content"
},
"related": [],
"section": "components",
"tags": ["type:component", "category:feedback", "behavior:async"],
"title": "UnityToast"
}
]
}