rc-segmented-button

Segmented button group backed by native radio inputs.

Package

@rcarls/rc-segmented-button

Element

<rc-segmented-button>

Native dependency

Direct-child fieldset with radio inputs

State model

Controlled or uncontrolled selected value

Main events

rc-segmented-button-change

Related

Theme previews

Installation

npm

npm install @rcarls/rc-segmented-button

Yarn

yarn add @rcarls/rc-segmented-button

import '@rcarls/rc-segmented-button/define';

Markup

<rc-segmented-button>
  <fieldset>
    <legend>Text size</legend>
    <label><input type="radio" name="size" value="small" /> Small</label>
    <label><input type="radio" name="size" value="medium" checked /> Medium</label>
    <label><input type="radio" name="size" value="large" /> Large</label>
  </fieldset>
</rc-segmented-button>

The fieldset, legend, labels, and radios stay in light DOM for forms and no-JavaScript fallback. Arrow keys, Home, and End follow the APG radio group model.

Without a theme, the fieldset, legend, and radio controls retain their browser appearance. Material and Substrate visually flatten the fieldset and legend, then style the labels as the segment surfaces; the semantic fieldset and legend remain available to assistive technology.

Live demo

API

Properties

Property	Markup	Type	Default	Description
value	value	string	Not specified	Current selected radio value. Host writes are silent.
defaultValue	default-value	string	Not specified	Initial selected value for uncontrolled usage.
disabled	disabled	boolean	false	Mirror disabled state to the native fieldset.
orientation	orientation	'horizontal' | 'vertical'	'horizontal'	Keyboard orientation.

Methods

No public methods are documented in the custom elements manifest.

Events

Event	Detail type	Description
rc-segmented-button-change	No detail type documented	Fired after user interaction changes the selected value.

Slots

Name	Description
(default)	A direct `<fieldset>` containing native radio inputs and labels.

CSS Custom Properties

Property	Default	Description
--rc-segmented-button-segment-gap	Not specified	Gap between segment icon and label content (defers to native label layout when unset).
--rc-segmented-button-segment-min-block-size	Not specified	Minimum segment block size (defers to native label layout when unset).
--rc-segmented-button-segment-padding-block	revert	Segment block-axis padding (defers to native label padding when unset).
--rc-segmented-button-segment-padding-inline	revert	Segment inline-axis padding (defers to native label padding when unset).
--rc-segmented-button-border	revert	Segment border (defers to native label border when unset).
--rc-segmented-button-color	revert	Segment text color (defers to native label color when unset).
--rc-segmented-button-bg	revert	Segment background (defers to native label background when unset).
--rc-segmented-button-radius	revert	Rounded corner radius on the first and last segments (defers to native label styling when unset).
--rc-segmented-button-divider	revert	Border between adjacent segments (defers to native label styling when unset).
--rc-segmented-button-selected-color	revert	Segment text color when its radio is checked (defers to native label color when unset).
--rc-segmented-button-selected-bg	revert	Segment background when its radio is checked (defers to native label background when unset).
--rc-segmented-button-focus-ring	revert	Segment outline when its radio is focus-visible (defers to native focus styling when unset).
--rc-segmented-button-focus-ring-offset	revert	Segment outline offset when its radio is focus-visible (defers to native focus styling when unset).
--rc-segmented-button-disabled-opacity	revert	Segment opacity when its radio is disabled, or when the host is `disabled` (defers to native disabled styling when unset).

CSS Parts

No CSS parts are documented in the custom elements manifest.