Checkbox

Ensure content is left aligned by default

Applies left alignment to content, to ensure consistent alignment even when inside centered layout containers.

Standardise disabled & critical state across form fields

Improves the consistency of form fields when combining both disabled and critical tone, which includes:

Move badge slot inside label

Relocate the badge slot inside the label slot enabling the Badge to sit alongside the last word in wrapping lines of text.

Refine the Checkbox, Radio, Toggle & MenuItemCheckbox size

Refines the size of the inline field elements including the RadioItem, Checkbox, Toggle and MenuItemCheckbox components.

Primarily impacts consumers of the seekJobs theme, seeing a reduction across all sizes.

Improve internal form field spacing

Refined the spacing between internal elements of form fields to align with the latest spacing guidelines.

This change impacts the Stack spacing between label and description, the form field itself and the message slots.

Improve virtual touch target positioning for narrow elements

To maintain accessibility for smaller interactive elements, Braid uses a virtual touch target to maintain the minimum hit area. This change ensures that the virtual element is always centered to the visual target, in particular when the width of the visual target is narrower than the minimum hit area.

Checkbox: Improve tri-state handling

Fixes a bug in tri-state Checkbox where transitioning from mixed to checked could result in the visual presentation being out of sync with the desired state.

Hide field borders in dark containers

Reduce visual noise when a form field is displayed in a dark container by hiding the default border. As fields are light on light backgrounds, the border is used to delineate its bounds against the container, which is not relevant in a dark container.

RadioItem, Checkbox: Fix stacking context behaviour

A RadioItem and Checkbox previously created a new stacking context with an elevated z-index applied on hover, resulting in their labels overlaying other elements in an unpredictable ways — most noticable when toggling nested content.

For example, toggling nested content containing an Autosuggest, would see the list of suggestions list would be overlayed by the next RadioItem on hover.

To fix this, the z-index is no longer elevated on hover, and additionally the nested content container applies an elevated index when the field is checked.

Checkbox, RadioItem: Fix alignment with updated Badge layout

Improve layout to work with updated Badge layout which is no longer driven by line height.

CheckboxStandalone: Enable alignment with Text

Enables CheckboxStandalone to be wrapped in a Text component, ensuring it only occupies the same layout as text. This is useful for visually aligning checkboxes in a custom layout alongside other text-based components, e.g. AccordionItem.

EXAMPLE USAGE:

Support data attribute boolean values

The data attribute map now supports boolean values. This provides an improvement for the developer experience, no longer having to convert values to strings explicitly.

EXAMPLE USAGE:

Autosuggest, Checkbox, CheckboxStandalone, Dropdown, MonthPicker, TextField, Textarea, Radio, RadioGroup: Dim the field value and label when field is disabled

Buttons, Fields, TextLinks, Toggle: Use span for field state overlays instead of div

Produce more valid HTML as div elements are not as flexible with which elements they can be inside (from a validators perspective).

Display formAccent outline on form elements when focused

Checkbox, RadioGroup, Radio: Use atoms for label cursor styles

Since the disabled state of a checkbox can only be changed via JavaScript, cursor styles can be toggled via Box props rather than generating additional CSS.

While this is an improvement in and of itself, this change is being made to work around a third-party testing bug where our use of :disabled in a complex CSS selector is causing an exception to be thrown.

CheckboxStandalone:: Add component

Adds support for cases where a Checkbox needs to be used without a form field style label.

To maintain accessibility, it is required to provide either a aria-label or aria-labelledby property, to describe the field's intent.

Given there is no visual label, the following features from a standard Checkbox cannot be supported:

EXAMPLE USAGE:

Checkbox,RadioGroup,Toggle: Add size support to Checkbox, RadioGroup & Toggle

Adds support for adjusting the size of a Checkbox, the RadioItems within a RadioGroup or a Toggle. Setting the size adjusts both the visual control and the text size of the label.

EXAMPLE USAGE:

Checkbox: Support inferring of tri-state checked value

To simplify the use of tri-state checkboxes, the checked prop now supports resolving the tri-state value from an array of checked values.

EXAMPLE USAGE:

Checkbox: Add support for mixed state

A checkbox can now accept a boolean or mixed as the checked property. When mixed, the checkbox is marked as being in an indeterminate state and announced as mixed to a screen reader.

EXAMPLE USAGE:

Checkbox,RadioGroup,Radio: Fix element type passed to onChange event

Fixes a bug where the onChange event previously received the change event for a form element rather than an input element.

Radio,Checkbox: Apply aria-describedby only when needed

Only apply aria-describedby when needed, e.g. either a message or description is passed.

Radio,Checkbox: Add description and badge support

Allows a way to provide more detail about a Radio or Checkbox item using description, bringing these fields into line with the rest of the form fields in Braid. Also allows a badge to be provided to be placed alongside the label.

EXAMPLE USAGE:

or

Checkbox & Radio: Only add aria-describedby when a message is provided

BUG FIXES

Checkbox & Radio

Both of these inputs were previously always adding the aria-describedby attribute, while conditionally rendering the message only when provided. This meant that elements without a message would be indicating that they are described by an element that does not exist.