Coverage

solidtype-heroui ports HeroUI’s components by hand onto Kobalte’s: HeroUI’s classes and the state its styles read, Kobalte’s behaviour and accessibility. Each port’s page shows it beside the same component in React.

Component	Status
Accordion	ported: one or several expanded, controlled or kept, disabled with an item’s own, surface, no separator, its own icon, a button given its slot, panels animated by their height and found by find in page, focus moved by the arrows; not yet a trigger’s own on_press and is_disabled
Alert	ported: statuses and their icons, indicator, title, description, as a surface
AlertDialog	ported: as Modal, its dialog an alertdialog that only its buttons close unless its backdrop says otherwise; statuses and their icons, placements, sizes; a custom portal container not yet
Autocomplete	ported: one or many chosen, controlled or kept, its search a SearchField filtering its ListBox, a filter given, its search’s text controlled, an empty state, open controlled or kept, empty collection, clear button, variants, full width, disabled, disabled options, sections, label, description and error, a form’s errors; a value drawn as tags not yet, with TagGroup
Avatar	ported: sizes, colors, variants, image once loaded, fallback
AvatarGroup	ported: sizes, colors, variants, max and its count, grid, overlaps
Badge	ported: colors, placements, sizes, variants, anchor, label
Breadcrumbs	ported: the last item the page, prerendered so too, disabled whole or an item at a time, a separator of its own, an item’s press told by its id
Button	ported: variants, sizes, full width, icon only, disabled
ButtonGroup	ported: variants, sizes, orientations, full width, disabled, separator
Card	ported: variants, header, title, description, content, footer, as a surface
Checkbox	ported: variants, selected, indeterminate, disabled, invalid, interaction state
CheckboxGroup	ported: values controlled or kept, variants, disabled, invalid, read-only, required, its label and descriptions
Chip	ported: colors, sizes, variants, label
CloseButton	ported: icon or custom children, disabled, interaction state
ComboBox	ported: one or many chosen, controlled or kept, its text controlled or kept, filtered as typed or by a filter given, opened by focus, typing or only its trigger, custom values, its list a ListBox, sections, disabled options, its value listed, variants, full width, disabled, read-only, label, description and error, a form sent its ids or its text; a list box’s empty state not yet
Description	ported: standalone, and a radio group’s, a radio’s or a text field’s
Disclosure	ported: expanded controlled or kept, disabled, its own trigger or a button given its slot, indicator, content animated by its height and found by find in page
DisclosureGroup	ported: one or several expanded, controlled or kept, disabled with a disclosure’s own, navigation by previous and next
Drawer	ported: as Modal, sliding in from any edge, its handle, dragged toward its edge to close; backdrop variants, dismissable or not
Dropdown	ported: on a button or a trigger of its own, or a long press; actions, a selection of one or many in the menu or a section, indicators, sections and headers, descriptions, keyboard shortcuts, separators, submenus, disabled items, placements, open controlled or kept, enter and exit animations
EmptyState	ported: its text, HeroUI’s or its own
InputGroup	ported: prefix, suffix, input or text area, variants, full width, a text field’s
Kbd	ported: variants, every key’s symbol and name, content
FieldError	ported: shown while its text field is invalid, a form’s server error in place of its own
Fieldset	ported: legend, group, actions, and its disabled state given to buttons, links and radio groups
Form	ported: a submit refused while a field is invalid, the first focused, server errors by name; onInvalid not yet
Input	ported: variants, full width, alone or a text field’s, interaction state
Label	ported: required, disabled, invalid; inline in a control’s content, a radio group’s, a text field’s
Link	ported: icon, disabled, interaction state
ListBox	ported: a selection of one or many, controlled or kept, actions, disabled options, sections and headers, descriptions, separators, variants, indicators of its own; not virtualized
Meter	ported: value within a range, colors, sizes, output, format options
Modal	ported: on a button or a trigger of its own, or a backdrop alone and controlled; backdrop variants, dismissable or not by a press or Escape; placements, sizes, scroll inside or outside; header, icon, heading, body, footer, close trigger and slot=close`; focus kept inside and given back, the page hidden from a reader and kept from scrolling, enter and exit animations; a custom portal container not yet
NumberField	ported: value controlled or kept, step and range snapped, variants, disabled, invalid, read-only, its label, description and error, format options
Pagination	ported: sizes, summary, pages, previous and next, ellipsis, disabled, custom icons; its page kept by the application, as in HeroUI
Popover	ported: on a button or a trigger of its own, dialog and heading, placements, arrow, offset, flip, open controlled or kept, focus kept inside and given back, the page hidden from a reader while open, enter and exit animations
ProgressBar	ported: value within a range, indeterminate, colors, sizes, output, format options
ProgressCircle	ported: value within a range, indeterminate, colors, sizes, format options, a circle of any size its arc measured on its own radius
Radio Group	ported: variants, orientations, controlled, disabled, invalid, descriptions, interaction state
ScrollShadow	ported: orientations, sizes, offset, visibility given or measured, hidden scrollbar
SearchField	ported: query controlled or kept, cleared by Escape or its button, submitted by Enter, variants, disabled, invalid
Select	ported: one or many chosen, controlled or kept, its list a ListBox, placeholder, value drawn as the option or by a function, clear button and Backspace, variants, full width, disabled, disabled options, sections, open controlled or kept, label, description and error, a form’s errors; a required select refused on submit not yet, as a text field’s
Separator	ported: orientations, variants
Skeleton	ported: animation types, and the page’s --skeleton-animation
Slider	ported: one value or a range, controlled or kept, step and range, vertical, disabled, output, format options
Spinner	ported: colors, sizes, its icon’s gradients unique per spinner
Surface	ported: variants, and the variant it gives what is inside it
Switch	ported: sizes, selected, disabled, invalid, interaction state, with HeroUI’s Label
SwitchGroup	ported: orientations
Tabs	ported: selection controlled or kept, horizontal or vertical, primary or secondary, aligned, disabled, manual activation, separators, an indicator that slides between tabs, a list that scrolls by its chevrons; not yet a tab as a link, href
TextArea	ported: variants, full width, alone or a text field’s, interaction state
TextField	ported: value controlled or kept, required, disabled, invalid, read-only, its label, description and error; validate not yet
TimeField	ported: value controlled or kept, granularity, hour cycle and leading zeros by the locale, min and max, variants, full width, disabled, invalid, read-only, required, prefix and suffix, its label, description and error; time zones not yet
Toast	ported: provider, placements, the stack collapsed and expanded, its hotkey, variants, indicators, action, loading, custom rendering, queues of its own, update, promise, pause and resume
ToggleButton	ported: variants, sizes, icon only, selected controlled or kept, disabled, interaction state
ToggleButtonGroup	ported: single or multiple selection controlled or kept, empty selection disallowed, sizes, orientations, detached, full width, disabled with a button’s own override, separator
Tooltip	ported: on a button or a trigger of its own, placements, arrow, offset, flip, delays of its own or the page’s, hover or focus, disabled, open controlled or kept, enter and exit animations
Typography	ported: every type and its element, alignments, colors, weights, truncation, primitives, prose

Not yet ported

These 16 components of HeroUI 3.2 are not ported yet, in the order they are being ported; each name is HeroUI’s own page. What a ported component does not do yet is in its row above and on its page.

Group	Components
Color, on Kobalte’s color components	ColorArea, ColorField, ColorPicker, ColorSlider, ColorSwatch, ColorSwatchPicker
Built from Kobalte’s primitives, where Kobalte has no component	Calendar, DateField, DatePicker, DateRangePicker, ErrorMessage, InputOTP, RangeCalendar, Table, TagGroup, Toolbar

ErrorMessage is a date field’s error, so it comes with Calendar and the date fields.