|Kit
Changelog

0.19.0

PasswordInput visibility control, translations for every label, and time-zone fixes

PasswordInput's reveal state can now be controlled: one checkbox can drive two fields, and the toggle can be replaced or hidden. It is also reachable from the keyboard. Every label the kit hard-coded can now be set through a translations prop, from DataTable's sort and filter names to Notification's dismiss button. Tabs, SegmentGroup and Table lay out correctly right to left. Calendar, DatePicker and DataTable's date filter now follow IntlProvider's time zone, and Schedule prints every time in its own zone. Chart's neutral color and light-mode contrast are fixed, and Spinner, TreeSelect and TimeInput get correct accessible names.

Spotlight

Password Input#312

One switch for every password field

Pass visible and onVisibleChange to control the reveal state, so one "Show passwords" checkbox can drive Password and Confirm together. hideToggle removes the built-in button once another control owns the state. To keep the button but change what it shows, renderToggle={(visible) => …} renders your own content, like the lock icons below. The kit's button keeps its keyboard access and accessible name.

View Password Input
Schedule#328

A schedule in its own time zone

Set timeZone and every surface reads it: chip times, their labels, the details popover, the now-cursor and the resize handles. A 09:00 New York meeting shows 09:00 wherever the viewer is.

View Schedule
DataTable#331

Every label in your language

DataTable's translations covers every label it renders: sort and filter names, the options menu, row checkboxes, pagination and the filters' own controls. About twenty other components get the same translations prop for their built-in labels.

View DataTable

Contributeurs

AdaStaff128
GraceStudent64
AlanStudent32

1

Changes

v0.18.2…v0.19.0 on GitHub

8added

7changed

11fixed

Password Input5 changesViewDatePicker4 changesViewTreeMultiSelect4 changesView
  • added8
  • Password Input

    Control the reveal state with visible, defaultVisible and onVisibleChange(visible), for example one "Show passwords" checkbox driving two fields

    #312
  • Password Input

    renderToggle={(visible) => …} replaces the eye icon inside the kit's button, and hideToggle removes the button when another control owns the state

    #322
  • Password Input

    translations.visibilityTrigger(visible) localizes the reveal button's accessible name

    #312
  • DataTable

    translations covers every label: select-all and row checkboxes, sort, filter and resize names, the options menu, filter placeholders, Retry, and the page-size Select and filters it renders

    #331
  • ComboboxSelectAutocomplete

    A translations prop for the built-in trigger, clear, remove, search, increment/decrement and upload labels

    #331
  • NotificationNotifierModal

    A translations prop for the close, dismiss, collapse/expand and region labels; <Notifications /> forwards its keys to every toast

    #331
  • Focus

    focusStyles({ inset: true }) draws the ring inside the element, for rows stacked flush in a scroller

    #326
  • Field

    Field takes composite for controls with no single labelable element: the label becomes a span and the control is named through aria-labelledby

    #329
  • changed7
  • Password Input

    The reveal toggle is in the Tab order and toggles on Enter, Space and screen-reader activation; toggleTabIndex={-1} restores the old pointer-only button

    #323
  • Password Input

    In development, a warning flags a renderToggle whose visible text is missing from the button's accessible name, and points to translations.visibilityTrigger

    #324
  • Combobox

    Combobox.Root's trigger is named "Show options" by default, the kit's English, instead of zag's "Toggle suggestions"

    #331
  • Schedule

    Event time ranges are formatted with Intl formatRange, so the locale merges shared parts ("9:00 – 10:30 AM") and a range that crosses midnight shows its dates

    #331
  • Chart

    In light mode, chart fills use the 600 step (700 for yellow) and clear the 3:1 non-text contrast minimum. Dark mode is unchanged

    #321
  • ThemeIconTabsSegment Group

    The default ThemeIcon and the filled Tabs and SegmentGroup tray use the kit's hairline border and quiet fill instead of the gray scale

    #316
  • MultiComboboxListTreeMultiSelect

    Option checkboxes render exactly like a standalone Checkbox, including its sizes (md grows from 16px to 18px)

    #316
  • fixed11
  • CalendarDatePickerDataTable

    Calendar, DatePicker, DataTable's date filter and Schedule's event details follow IntlProvider's timeZone (prop, then provider, then host) instead of always reading the host zone

    #317
  • CalendarDatePicker

    When the time zone changes, the picked date keeps its instant and is shown in the new zone. Nothing remounts, onChange doesn't fire, and focus stays where it was

    #327
  • Schedule

    With timeZone set, chip times, their aria-labels, the details popover, the now-cursor and the resize handles all read the schedule's zone instead of the host's

    #328
  • Chart

    color="neutral" no longer renders blue, and a chart with no color follows an ancestor's data-color like every other component

    #318
  • SpinnerButtonActionIcon

    Spinner's accessible name comes from label, and label={null} takes it out of the accessibility tree, so loading Buttons and ActionIcons no longer expose an extra "Spinner" image

    #319
  • TreeSelectTreeMultiSelect

    The trigger is named by the Field label, announces the description or error, and its aria-controls points at the tree

    #325
  • TreeSelectTreeMultiSelectNotification

    Tree rows and Notification's action, close and collapse buttons show the kit's opaque 2px focus ring instead of a faint translucent one

    #326
  • Time InputDatePickerSegment Group

    Time-segment and AM/PM groups take their name from the field label, and DatePicker's range rows are announced as "Start time" and "End time"

    #329
  • TabsSegment GroupTable

    Right to left, Tabs and SegmentGroup separators sit between the items, and Table headers align to the start with scroll fades on the correct edge

    #331
  • Timeline

    Bullet rings and the gradient bullet's cut-out paint the page background in light mode instead of white

    #316
  • Choice Card GroupClipboardProgress

    These entry points ship "use client", so a Server Component can import them

    #320

Full log

Every release of the 42 UI kit — newest first, filterable, and tagged with what it changed.

0.18.2

Kbd redesigned as a key cap, and fixes for DataTable row clicks, Switch and the Schedule now label

On this page

SpotlightChangesAdded · 8Password Input · Control the reveal state with visible, defaultVisible and onVisibleChange(visible), for example one "Show passwords" checkbox driving two fieldsPassword Input · renderToggle={(visible) => …} replaces the eye icon inside the kit's button, and hideToggle removes the button when another control owns the statePassword Input · translations.visibilityTrigger(visible) localizes the reveal button's accessible nameDataTable · translations covers every label: select-all and row checkboxes, sort, filter and resize names, the options menu, filter placeholders, Retry, and the page-size Select and filters it rendersCombobox, Select, Autocomplete, MultiSelect, ComboboxList, MultiComboboxList, TreeSelect, TreeMultiSelect, Number Input, Time Input, DatePicker, TagsInput, File Upload · A translations prop for the built-in trigger, clear, remove, search, increment/decrement and upload labelsNotification, Notifier, Modal, Drawer, NavLink · A translations prop for the close, dismiss, collapse/expand and region labels; <Notifications /> forwards its keys to every toastFocus · focusStyles({ inset: true }) draws the ring inside the element, for rows stacked flush in a scrollerField · Field takes composite for controls with no single labelable element: the label becomes a span and the control is named through aria-labelledbyChanged · 7Password Input · The reveal toggle is in the Tab order and toggles on Enter, Space and screen-reader activation; toggleTabIndex={-1} restores the old pointer-only buttonPassword Input · In development, a warning flags a renderToggle whose visible text is missing from the button's accessible name, and points to translations.visibilityTriggerCombobox · Combobox.Root's trigger is named "Show options" by default, the kit's English, instead of zag's "Toggle suggestions"Schedule · Event time ranges are formatted with Intl formatRange, so the locale merges shared parts ("9:00 – 10:30 AM") and a range that crosses midnight shows its datesChart · In light mode, chart fills use the 600 step (700 for yellow) and clear the 3:1 non-text contrast minimum. Dark mode is unchangedThemeIcon, Tabs, Segment Group · The default ThemeIcon and the filled Tabs and SegmentGroup tray use the kit's hairline border and quiet fill instead of the gray scaleMultiComboboxList, TreeMultiSelect · Option checkboxes render exactly like a standalone Checkbox, including its sizes (md grows from 16px to 18px)Fixed · 11Calendar, DatePicker, DataTable, Schedule · Calendar, DatePicker, DataTable's date filter and Schedule's event details follow IntlProvider's timeZone (prop, then provider, then host) instead of always reading the host zoneCalendar, DatePicker · When the time zone changes, the picked date keeps its instant and is shown in the new zone. Nothing remounts, onChange doesn't fire, and focus stays where it wasSchedule · With timeZone set, chip times, their aria-labels, the details popover, the now-cursor and the resize handles all read the schedule's zone instead of the host'sChart · color="neutral" no longer renders blue, and a chart with no color follows an ancestor's data-color like every other componentSpinner, Button, ActionIcon · Spinner's accessible name comes from label, and label={null} takes it out of the accessibility tree, so loading Buttons and ActionIcons no longer expose an extra "Spinner" imageTreeSelect, TreeMultiSelect · The trigger is named by the Field label, announces the description or error, and its aria-controls points at the treeTreeSelect, TreeMultiSelect, Notification · Tree rows and Notification's action, close and collapse buttons show the kit's opaque 2px focus ring instead of a faint translucent oneTime Input, DatePicker, Segment Group · Time-segment and AM/PM groups take their name from the field label, and DatePicker's range rows are announced as "Start time" and "End time"Tabs, Segment Group, Table · Right to left, Tabs and SegmentGroup separators sit between the items, and Table headers align to the start with scroll fades on the correct edgeTimeline · Bullet rings and the gradient bullet's cut-out paint the page background in light mode instead of whiteChoice Card Group, Clipboard, Progress, Circular Progress, Rating · These entry points ship "use client", so a Server Component can import them