repository·main·Indexed 23 days ago
https://github.com/kobaltedev/kobalteAn accessible, unstyled UI toolkit for building design systems and web applications with SolidJS. It provides low-level components and primitives that implement WAI-ARIA Authoring Practices. The ecosystem includes @kobalte/core for components, @kobalte/tailwindcss for state-based styling modifiers, and @kobalte/vanilla-extract for CSS-in-JS state styling.
Kobalte is a UI toolkit designed for building accessible web applications and design systems using SolidJS. It provides low-level UI components and primitives that serve as a foundation for custom design systems.
The Kobalte Combobox implements the WAI ARIA Combobox design pattern and includes the following capabilities:
<select> element.Combobox.Section), and custom placeholders.The Select component provides several built-in capabilities:
<select> element.Select.Section), custom placeholders, and both controlled and uncontrolled states.Breadcrumbs provide navigational context using a hierarchy of links. The component structure follows a specific anatomy to ensure proper ARIA semantics:
Breadcrumbs (or Root): The root container that renders a <nav> element. It provides the landmark navigation context.ol: A native HTML ordered list used to contain the breadcrumb items.li: A native HTML list item that wraps a link and a separator.Breadcrumbs.Link: The interactive element (renders an <a> by default) representing a step in the hierarchy.Breadcrumbs.Separator: A visual element (renders a <span> by default) between items. It is hidden from screen readers to avoid noise.Note: You can use the separator prop on the root Breadcrumbs component to provide a default visual separator for all instances.
<Breadcrumbs>
<ol>
<li>
<Breadcrumbs.Link />
<Breadcrumbs.Separator />
</li>
</ol>
</Breadcrumbs>The Select component is composed of several parts that work together to implement the WAI ARIA Listbox pattern.
body to avoid clipping issues.<Select>
<Select.Label />
<Select.Trigger>
<Select.Value />
<Select.Icon />
</Select.Trigger>
<Select.Description />
<Select.ErrorMessage />
<Select.Portal>
<Select.Content>
<Select.Arrow />
<Select.Listbox />
</Select.Content>
</Select.Portal>
</Select>A ColorArea is built using a specific anatomy of sub-components. You are responsible for rendering these to create the visual interface:
Note: ColorArea.HiddenInputX and ColorArea.HiddenInputY are placed inside the ColorArea.Thumb to support touch screen readers.
<ColorArea>
<ColorArea.Label />
<ColorArea.Background>
<ColorArea.Thumb>
<ColorArea.HiddenInputX />
<ColorArea.HiddenInputY />
</ColorArea.Thumb>
</ColorArea.Background>
</ColorArea>Kobalte automatically attaches data-* attributes to components and their parts to represent their current state. You can target these states in your CSS using attribute selectors.
Common examples include:
data-expanded: When a component (like a Popover) is expanded.data-disabled: When a component is disabled.data-checked, data-selected, data-pressed, etc.A Dialog is composed of several parts that manage the lifecycle, accessibility, and rendering of a modal window. The standard anatomy follows this structure:
button) that opens the dialog.body to avoid z-index or nesting issues.h2) for screen readers.p) for screen readers.<Dialog>
<Dialog.Trigger />
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.CloseButton />
<Dialog.Title />
<Dialog.Description />
</Dialog.Content>
</Dialog.Portal>
</Dialog><Dialog>
<Dialog.Trigger />
<Dialog.Portal>
<Dialog.Overlay />
<Dialog.Content>
<Dialog.CloseButton />
<Dialog.Title />
<Dialog.Description />
</Dialog.Content>
</Dialog.Portal>
</Dialog>An Accordion is composed of several parts that follow the WAI ARIA Accordion pattern. The structure requires nesting a Trigger inside a Header, and the Header and Content must be children of an Item.
as prop to change the heading level).<Accordion>
<Accordion.Item>
<Accordion.Header>
<Accordion.Trigger />
</Accordion.Header>
<Accordion.Content />
</Accordion.Item>
</Accordion>A ToggleGroup is a set of two-state buttons that can be toggled on (pressed) or off (not pressed). It consists of a root container (ToggleGroup) and individual toggle buttons (ToggleGroup.Item).
It supports both horizontal and vertical orientations and provides built-in keyboard support for navigation and activation.
<ToggleGroup>
<ToggleGroup.Item value="item-1" />
</ToggleGroup><ToggleGroup>
<ToggleGroup.Item />
</ToggleGroup>The Tooltip component follows standard accessibility patterns for keyboard navigation:
| Key | Description |
|---|---|
Tab | Opens/closes the tooltip without delay. |
Space | When open, closes the tooltip without delay. |
Enter | When open, closes the tooltip without delay. |
Esc | When open, closes the tooltip without delay. |