sizeselected

Sizeselected is a term used in software development to denote the currently chosen size option within a user interface. It can refer to a property on a component, a data attribute, or a state value that tracks which size variant is active. The concept is common in size selectors, product configurators, typography controls, and responsive layouts where users can switch between predefined size presets such as xs, s, m, l, and xl.

In HTML and CSS, sizeselected may be represented as a data attribute like data-sizeselected="lg" on the active option, or as a value on a container that informs styling rules. In JavaScript and modern frameworks, sizeselected is typically implemented as a state variable that drives rendering and styles. For example, in React, a state like sizeSelected with a setter function may be used, and the option whose value equals sizeSelected is rendered with an active appearance and accessible attributes such as aria-selected.

Operational role: It enables dynamic adjustments to layout, typography, or assets based on the selected size, and it can be serialized in API payloads or CSS class names for consistent theming across components.

Considerations: Design systems should ensure consistent semantics across components, provide keyboard and screen reader accessibility, and keep naming clear to avoid confusion with per-option flags. See also size, size picker, responsive design, data attributes, accessibility.