CSS ComponentThe latest version of this package is: 17.0.30-alpha.8, Opens in new window
Radio buttons allow the selection of a single option from a set
This component provides .css
, .styl
, .less
and .scss
-files.
To be able to install this component, please refer to the Project Setup documentation.
$ npm i @ids-core/radio-buttons@17.0.30-alpha.8
Table of Contents
Edit this section, Opens in new windowUsage
Default
<div class="if input-wrapper">
<fieldset class="if">
<legend class="if">A paved road or a path?</legend>
<div class="if radio-buttons">
<input
checked
type="radio"
id="radio-buttons-implementation-radio-1"
class="if radio-button"
name="radios"
/>
<label for="radio-buttons-implementation-radio-1">A duck</label>
<input
type="radio"
id="radio-buttons-implementation-radio-2"
class="if radio-button"
name="radios"
/>
<label for="radio-buttons-implementation-radio-2">A duck</label>
<input
type="radio"
id="radio-buttons-implementation-radio-3"
class="if radio-button"
name="radios"
/>
<label for="radio-buttons-implementation-radio-3">A duck</label>
<span class="if input-error" aria-live="polite">A validation error</span>
<span class="if input-help">A helpful text</span>
</div>
</fieldset>
</div>
Horizontal
<fieldset class="if">
<legend class="if">Har du bonus i et annet selskap?</legend>
<div class="if input-wrapper">
<div class="if radio-buttons [horizontal]">
<input
type="radio"
id="radio-button-types-radio-help-1"
class="if radio-button"
name="radios"
/>
<label for="radio-button-types-radio-help-1">Yes</label>
<input
type="radio"
id="radio-button-types-radio-help-2"
class="if radio-button"
name="radios"
/>
<label for="radio-button-types-radio-help-2">No</label>
</div>
</div>
</fieldset>
Standalone
If you want to use a Radio Button as a standalone component, i.e. just a Radio Button without label, use
the .standalone
-class.
<form autocomplete="off" style="width: 100%">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
checked
type="radio"
id="radio-standalone-radio2"
class="if radio-button standalone"
name="radio-standalone-radio2"
/>
<label for="radio-standalone-radio2"></label>
</div>
</div>
</form>
With help text
<fieldset class="if">
<legend class="if">Har du bonus i et annet selskap?</legend>
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
type="radio"
id="radio-button-types-radio-help-1"
class="if radio-button"
name="radios"
/>
<label for="radio-button-types-radio-help-1">Yes</label>
<input
type="radio"
id="radio-button-types-radio-help-2"
class="if radio-button"
name="radios"
/>
<label for="radio-button-types-radio-help-2">No</label>
</div>
<span class="if input-help"
>Vi kan ikke se at du har bilforsikring i If fra fรธr. Siden du ikke har oppparbeidet deg
bonus, gir vi deg 40 % startbonus.</span
>
</div>
</fieldset>
<fieldset class="if">
<legend class="if">Har du bonus i et annet selskap?</legend>
<div class="if input-wrapper">
<div class="if radio-buttons horizontal">
<input
type="radio"
id="radio-button-types-radio-horizontal-help-1"
class="if radio-button"
name="radios"
/>
<label for="radio-button-types-radio-horizontal-help-1">Yes</label>
<input
type="radio"
id="radio-button-types-radio-horizontal-help-2"
class="if radio-button"
name="radios"
/>
<label for="radio-button-types-radio-horizontal-help-2">No</label>
</div>
<span class="if input-help"
>Vi kan ikke se at du har bilforsikring i If fra fรธr. Siden du ikke har oppparbeidet deg
bonus, gir vi deg 40 % startbonus.</span
>
</div>
</fieldset>
Sizing
With given attributes (data-size), you can vary the size of the Radio Button.
<form autocomplete="off">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
data-size="largest"
checked
class="if radio-button"
id="radio-button-data-size-largest-toggle-1"
type="radio"
/>
<label
data-speccer-measure="width bottom"
class="if"
for="radio-button-data-size-largest-toggle-1"
>Purple</label
>
</div>
</div>
</form>
<form autocomplete="off">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
data-size="larger"
checked
class="if radio-button"
id="radio-button-data-size-larger-toggle-1"
type="radio"
/>
<label
data-speccer-measure="width bottom"
class="if"
for="radio-button-data-size-larger-toggle-1"
>Purple</label
>
</div>
</div>
</form>
<form autocomplete="off">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
data-size="large"
checked
class="if radio-button"
id="radio-button-data-size-large-toggle-1"
type="radio"
/>
<label
data-speccer-measure="width bottom"
class="if"
for="radio-button-data-size-large-toggle-1"
>Purple</label
>
</div>
</div>
</form>
<form autocomplete="off">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
data-size="medium"
checked
class="if radio-button"
id="radio-button-data-size-medium-toggle-1"
type="radio"
/>
<label
data-speccer-measure="width bottom"
class="if"
for="radio-button-data-size-medium-toggle-1"
>Purple</label
>
</div>
</div>
</form>
<form autocomplete="off">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
data-size="small"
checked
class="if radio-button"
id="radio-button-data-size-small-toggle-1"
type="radio"
/>
<label
data-speccer-measure="width bottom"
class="if"
for="radio-button-data-size-small-toggle-1"
>Purple</label
>
</div>
</div>
</form>
<form autocomplete="off">
<div class="if input-wrapper">
<div class="if radio-buttons">
<input
data-size="smallest"
checked
class="if radio-button"
id="radio-button-data-size-smallest-toggle-1"
type="radio"
/>
<label
data-speccer-measure="width bottom"
class="if"
for="radio-button-data-size-smallest-toggle-1"
>Purple</label
>
</div>
</div>
</form>
Tokens
Radio-buttons tokens
Name | Value | Is aliased in |
---|---|---|
$ids-radio-buttons-font-size |
1rem |
|
$ids-radio-buttons-flex-direction |
column |
|
$ids-radio-buttons-align-items |
flex-start |
|
$ids-radio-buttons-justify-content |
center |
|
$ids-radio-buttons-min-height |
3rem |
|
$ids-radio-buttons-horizontal-flex-direction |
row |
|
$ids-radio-buttons-horizontal-align-items |
center |
|
$ids-radio-buttons-horizontal-justify-content |
flex-start |
|
$ids-radio-buttons-label-margin |
0 1rem 0 0 |
|
$ids-radio-buttons-label-padding |
0 |
|
$ids-radio-buttons-label-height |
3rem |
Changelog
Change Log
All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.
16.0.0 (2023-01-10)
โ BREAKING CHANGES
- Checkboxes - smaller with rounded corners. Checked state - thicker checkmark,
filled background.Radio-buttons - smaller buttons, rounded focus.
- Merged PR 93047: feat(checkbox radio-buttons): style improvements for checkboxes and radio-but... (0ddda18), closes #672478 #672478
14.22.2 (2022-05-03)
Miscellaneous chores
- package locks: update package locks (813eac7)
14.20.1 (2022-04-19)
Miscellaneous chores
- changelog: regenerate all CHANGELOG.md files (64ab385) , closes #586342
- changelog: regenerate all changelogs after updating changelog generation (70789c9) , closes #587270
14.18.3 (2022-04-13)
Bug Fixes
- changelog: generate new CHANGELOG.md files for root and
packages (349fda4)
,
closes #586063
. We regenerate the files to include all relevant commits and to use
conventional-commits
at 100%
14.16.0 (2022-04-07)
Bug Fixes
14.9.0 (2022-03-03)
Miscellaneous chores
- ๐ค Bootstrap (6822f5b)
14.8.1 (2022-02-23)
Bug Fixes
reinstall (d425056)
bootstrap (9a713df)
merge (2b1c5f1)
reinstall (5221600)
reinstall (147df55)
- use correct versions (f1b5deb)
14.3.0 (2022-02-09)
Bug Fixes
reinstall (afce1f2)
reinstall (67f3140)
-
Add changelog.md to files (3338314)
Reinstall (a2abf51)
14.2.2 (2021-12-10)
Code Refactoring
-
๐ก Change focus styles, remove whatinput (75fd31b) , closes #505205
-
rebuild and reinstall (f9fb687)
reinstall (885c74b)
-
fix changelogs manually (b1232b4)
reinstall (545a069)
reinstall (e149c2c)
13.12.3 (2021-11-09)
โ BREAKING CHANGES
- ๐งจ The scope for If Design System npm packages has now changed from
@if-design-system
to@ids-core
. We have also renamed the repository fromif-design-system
toids-core
- ๐งจ 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!
Documentation Updates
-
โ๏ธ Move position of the quick links (5cb0897)
-
โ๏ธ Remove unneeded margins for shortcuts (36c7e8d)
-
โ๏ธ Separate out CSS documentation (ddae70e) , closes #467386
-
โ๏ธ Update links and change navigation structure (0bfd27d) , closes #490579
Code Refactoring
-
๐ก Reduce spacing tokens, use correct size tokens (97aa461)
-
๐ก Rename scope and repository (3ea5423)
-
๐ก Use new navigation structure for documentation (415aee5) , closes #490579
-
another change in the structure (38a0d2e)
Miscellaneous chores
bootstrap (6fc1ed8)
reinstall (da80dba)
13.11.0 (2021-10-19)
Features
- ๐ธ Input field hot reload (eac76b7)
13.9.2 (2021-09-30)
Bug Fixes
- ๐ Complete the pseudo-element fix (1dcee2c)
13.7.0 (2021-09-22)
Documentation Updates
- โ๏ธ Update linking layout and naming (15c383b)
13.6.3 (2021-09-17)
Bug Fixes
13.6.0 (2021-09-08)
Documentation Updates
- Use default shortcut listing for demo links (a746602)
13.5.1 (2021-09-07)
Bug Fixes
-
๐ Update and fix data sizing for form elements (5fbefb4) , closes #374144
-
Use correct mixins and add missing mixins (1d440bd)
Documentation Updates
-
โ๏ธ USe wider examples for data sizes (67cd1f5)
-
๐ค Rearrange diffs for test, use grey color for unaffected (1834399)
-
๐ค Use node v14 (4009973)
bootstrap (d23e139)
- ๐ค Use correct order for diff (cc6a4fd)
12.14.1 (2021-08-12)
Miscellaneous chores
12.13.1 (2021-08-11)
Bug Fixes
-
๐ Whitelist docs dir for npm packaging (1a5cfd0) , closes #457621
-
๐ค Remove .gitignore, use npm package.json files instead, ignore zip files for npm pack (49f0269) , closes #412081 . This will whitelist files to be used in "npm pack"
-
๐ค Reinstall (e660696)
12.10.1 (2021-06-30)
Bug Fixes
-
๐ Use correct height for radio buttons (a9ac710) , closes #432559
-
๐ค Update published date (61e7ccf)
12.6.0 (2021-05-27)
Bug Fixes
-
๐ Manually set firstPublished and lastModified (e83af7d)
-
๐ We don't need lastModified (e458a12)
12.0.0 (2021-05-05)
โ BREAKING CHANGES
- ๐งจ All of the mixins have now been renamed
- ๐งจ Notification is now renamed to Alert Banner
- ๐งจ This extracts the Hero variation with no image into a separate, design updated component named Header
- ๐งจ Footer is now renamed to Global Footer
- ๐งจ The Dropdown Component is now renamed to Dropdown Select. Dropdown is a pattern.
- ๐งจ Crosslinks have seized to exist. They are all extracted into separate components. This commit converts crosslink buttons into the new component Shortcuts
- ๐งจ Selection controls is no more. Has ceased to be. Bereft of life, it rests in peace. This is an ex-component. The component is split into Radio Buttons, Toggle Control and Checkbox
Features
-
๐ธ Extract components from selection control (50607a4) , closes #336508
-
๐ธ Rename and extract and update hero with no image to (384eb77) , closes #336508 . Header component
Bug Fixes
- ๐ Use correct data size for largest (3357893)
Documentation Updates
- โ๏ธ Update documentation for selection controls (46d15e9)
Code Refactoring
-
๐ก Rename and consolidate mixins (67cf470) , closes #268081
-
๐ก Rename crosslink buttons to Shortcuts (c05bf9c) , closes #336508
-
๐ก Rename Dropdown to Dropdown Select (af1fc9d) , closes #336508
-
๐ก Rename Footer to Global Footer (7cb7239) , closes #336508
-
๐ก Rename Notification to Alert Banner (8b4e48d) , closes #336508
Miscellaneous chores
-
๐ค Make sure all components are named with capital first (08e9a26)
-
๐ค Reinstall (2c763ea)
-
๐ค Reinstall (69e1a5b)
-
๐ค Updating links (70f166e)
rebuild (7edb430)