DOCSEARCHbyAlgolia
Submit Docs

Kobalte

website·Indexed 33 days ago

https://kobalte.dev

A UI toolkit for building accessible web apps and design systems with SolidJS. Kobalte provides a set of unstyled, low-level UI components—including Accordion, Dialog, Combobox, and Popover—that are WAI-ARIA compliant and support polymorphism, server-side rendering (SSR), and custom styling.

Tokens
76.1K
Snippets
371
Records
556
Agent score
67%

What's inside Kobalte

  1. Overview of Kobalte UI Toolkit

    Kobalte is a low-level UI toolkit designed for building accessible web applications and design systems specifically for SolidJS. It provides primitives and components that handle complex accessibility requirements—including ARIA attributes, focus management, and keyboard navigation—following the WAI-ARIA Authoring Practices.

    Key architectural principles include:

    • Unstyled: Components ship with zero default styles, making them compatible with any styling solution (e.g., Tailwind CSS, vanilla CSS, or CSS-in-JS).
    • Composable: Components provide granular access to their internal parts, allowing developers to wrap them and inject custom props or event listeners.

  3. Use the Kobalte Badge component

    The Badge component is used to display small pieces of information or status indicators. It renders as a span by default and includes built-in ARIA support with role="status" to communicate dynamic updates to assistive technologies.
    import { Badge } from "@kobalte/core/badge";

export function Example() {
  return (
    <Badge textValue="5 unread messages">
      5 messages
    </Badge>
  );
}

  5. NavigationMenu accessibility and behavioral features

    The NavigationMenu component is built to be highly accessible and follows the WAI-ARIA Menu and Menubar design pattern. Key features include:

    • Modes: Supports both modal and non-modal interaction modes.
    • Keyboard Navigation: Full keyboard support for opening and navigating, including automatic scrolling to focused items and typeahead for fast item focusing.
    • Selection: Supports checkable items (single or multiple) with optional indeterminate states.
    • Accessibility: Complex item labeling support and managed focus for screen readers.

  6. Use Kobalte with Server Side Rendering (SSR)

    Kobalte is compatible with any Server Side Rendering (SSR) setup for SolidJS, provided the environment is correctly configured.

  7. Implement a Color Channel Field

    The ColorChannelField component allows users to edit individual color channel values. It is built with a native <input> element and follows the WAI ARIA Spinbutton design pattern. It supports both controlled and uncontrolled states, as well as increment/decrement triggers and ARIA-linked descriptions and error messages.
    import { ColorChannelField } from "@kobalte/core/color-channel-field";

export function BasicExample() {
	return (
		<ColorChannelField channel="hue">
			<ColorChannelField.Label>Hue</ColorChannelField.Label>
			<div style={{ position: 'relative' }}>
				<ColorChannelField.Input />
				<ColorChannelField.IncrementTrigger aria-label="Increment">
					{/* Icon here */}
				</ColorChannelField.IncrementTrigger>
				<ColorChannelField.DecrementTrigger aria-label="Decrement">
					{/* Icon here */}
				</ColorChannelField.DecrementTrigger>
			</div>
		</ColorChannelField>
	);
}

  8. New features introduced in Kobalte v0.9.0

    Kobalte v0.9.0 added the following components and capabilities:

    • Combobox component
    • Tooltip component
    • Support for multiple Toast.Region instances.

  9. Import the Radio Group component

    The Radio Group component can be imported from @kobalte/core/radio-group. You can import the main RadioGroup component or destructure specific sub-components like Root and Label.
    import { RadioGroup } from "@kobalte/core/radio-group";
// or
import { Root, Label, ... } from "@kobalte/core/radio-group";

  10. Manage multiple Toast regions

    You can display toasts in different areas of the screen by defining multiple Toast.Region components. To target a specific region when showing a toast, pass the region option in the toaster.show() configuration object. If no region is provided, the default region is used.
    // 1. Define regions in your layout
<Portal>
  <Toast.Region>
    <Toast.List />
  </Toast.Region>
  <Toast.Region regionId="custom-region-id">
    <Toast.List />
  </Toast.Region>
</Portal>

// 2. Trigger a toast in a specific region
toaster.show(props => <Toast toastId={props.toastId}>...</Toast>, {
  region: "custom-region-id",
});

  11. Organize menu items with groups and labels

    Use DropdownMenu.Group to cluster related items. Pair it with DropdownMenu.GroupLabel to provide an accessible label for the group. Note that DropdownMenu.GroupLabel is not focusable via arrow keys.
    <DropdownMenu.Group>
	<DropdownMenu.GroupLabel>Branches</DropdownMenu.GroupLabel>
	<DropdownMenu.RadioGroup value={branch()} onChange={setBranch}>
		<DropdownMenu.RadioItem value="main">main</DropdownMenu.RadioItem>
	</DropdownMenu.RadioGroup>
</DropdownMenu.Group>

  12. Integrate Select with HTML forms

    To use a Select component within a standard HTML form, provide a name prop to the Select component and include the Select.HiddenSelect component inside the Select wrapper. This ensures the selected value is correctly submitted with the form.
    <form onSubmit={onSubmit}>
	<Select
		name="fruit"
		options={["Apple", "Banana"]}
	>
		<Select.HiddenSelect />
		<Select.Trigger>
			<Select.Value>{state => state.selectedOption()}</Select.Value>
		</Select.Trigger>
		<Select.Portal>
			<Select.Content>
				<Select.Listbox />
			</Select.Content>
		</Select.Portal>
	</Select>
	<button>Submit</button>
</form>