Segmented Control is a set of two or more segments. Segments act like radio buttons.
This component provides
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @firstname.lastname@example.org
Table of ContentsEdit this section, Opens in new window
Segmented control is a restyled group of radio buttons.
Segment container must have
role="radiogroup", and must have associated label with it, commonly via
radio button in a
Segment should have its own id; as well as assigned the same
name attribute, so that browser knows to group these controls together.
<form> <div class="if input-wrapper"> <div class="if segmented-control" role="radiogroup" id="labelled-segmented-control" aria-labelledby="segment-accessibility-label" > <input class="if" type="radio" id="segment-accessibility-1" name="segment-accessibility-example" /> <label class="if" for="segment-accessibility-1">Segment</label> <input class="if" type="radio" id="segment-accessibility-2" name="segment-accessibility-example" /> <label class="if" for="segment-accessibility-2">Segment</label> </div> <div class="if input-label-wrapper"> <label class="if input-label" id="segment-accessibility-label" for="labelled-segmented-control"> Label </label> <button type="button" class="if help-tooltip" aria-label="Help for segmented control"></button> </div> </div> </form>
Therefore, if correct radio button markup has been used - accessibility comes for free from the browser. More info at w3.
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
- 🐛 Added ifdesignsystem.min.css (815c2eb)
- 🐛 Changed hovered,selected-hovered state style, hot reload (26d4703)
- 🤖 Rename util to utils (f78721f)
- 💡 Rename scope and repository (3ea5423)
- 💡 Use new navigation structure for documentation (415aee5), closes #490579
- 🧨 The scope for If Design System npm packages has now changed from
@ids-core. We have also renamed the repository
- 🧨 Util is now renamed to Utils
- 🧨 We have now changed the navigation structure for the documentation site.
Please update any saved links!
- 🧨 Navigation structure has now changed. Please see release notes!
- 🎸 Input field hot reload (eac76b7)
- 🐛 Update references (c08f107)
- 💡 Rename and consolidate mixins (67cf470), closes #268081
- 💡 Rename crosslink buttons to Shortcuts (c05bf9c), closes #336508
- 💡 Rename Footer to Global Footer (7cb7239), closes #336508
- 🧨 All of the mixins have now been renamed
- 🧨 This extracts the Hero variation with no image into a separate, design
updated component named Header
- 🧨 Footer is now renamed to Global Footer
- 🧨 Crosslinks have seized to exist. They are all extracted into separate
components. This commit converts crosslink buttons into the new component Shortcuts