Checkbox / Radio

Checkbox / Radio

Custom checkbox and radio styling for native form controls in @bnotk/dsx.

Live Preview

Import

<link rel="stylesheet" href="@bnotk/dsx/css/checkbox-radio.css">

Or use the full bundle:

<link rel="stylesheet" href="@bnotk/dsx/css/index.css">

Classes

Class	Purpose
.dsx-check	Label wrapper that aligns the control and text
.dsx-check__input	Base custom control for native checkbox or radio inputs
.dsx-check__label	Text label beside the control
.dsx-check-group	Vertical stack of checks
.dsx-check-group--inline	Horizontal / wrapped layout
.dsx-check-group--error	Error styling for controls inside the group

States and variants

• .dsx-check:has(input:disabled) reduces opacity and switches the cursor to not-allowed.
• Hover changes the control border to var(--ds2-color-main).
• :focus-visible uses var(--ds2-shadow-focus).
• Checkboxes use a rounded-square shape, a navy checked state, and SVG data URIs for the checkmark and indeterminate dash.
• Radios are circular and become solid-ring indicators by increasing border width to 5px when checked.
• Disabled controls use var(--ds2-color-grey-2) and var(--ds2-color-grey-1).
• .dsx-check-group--error sets the control border to var(--ds2-color-error).

Example

<label class="dsx-check">
  <input class="dsx-check__input" type="checkbox" checked>
  <span class="dsx-check__label">Receive updates</span>
</label>

Accessibility notes

• Keep the real native <input> in the DOM.
• Wrap each control with a <label> or connect it through for/id.
• Use <fieldset> and <legend> for grouped checkboxes or radio sets.
• Share the same name for mutually exclusive radio buttons.