Card (selection)
Selection cards offer selection options: radio buttons for making a single selection, checkboxes for making multiple selections, or toggles for turning settings on or off.
Demo
Add a brief description or supporting details about the topic.
Add a brief description or supporting details about the topic.
Add a brief description or supporting details about the topic.
Add a brief description or supporting details about the topic.
toggle label1
Add a brief description or supporting details about the topic.
toggle label1
Add a brief description or supporting details about the topic.
API
Tag
| Name |
<s-card-selection>
|
Props
| Name | Value | Required | Description |
disabled |
Boolean |
|
Disables the card. |
Classes
| Name | Description |
div.card-container |
Add this class to the parent of all cards to enable responsive behavior. Cards can also be placed using the grid. |
active
|
Applies background color to indicate an active card. |
Slots
| Tag | Slot Name | Required | Value | Example |
|---|---|---|---|---|
<div> |
input
|
input radio | <input type="radio" id="radio" name="radio-group" value="radio1" /> <label htmlFor="radio">Label 1</label> |
|
<div> |
input
|
input checkbox | <input type="checkbox" id="checkbox" name="checkbox-group" value="checkbox" /> <label htmlFor="checkbox">Label 1</label> |
|
<div> |
input
|
input toggle | <s-toggle aria-label="power switch" id="power-toggle" checked="false"></s-toggle> <div class="toggle-label"> Label1</div> |
|
<img> or <svg> |
media |
<img src="image-url" slot="media" alt="descriptive text" /> |
||
<div> |
description |
<div slot="description">Add a brief description or supporting details about the topic.</div> |
||
<s-tag> or <s-badge> |
status |
<s-badge slot="status" count="1" aria-label="1 unread message"></s-badge> |
Demo
API
Tag
| Name |
<SCardSelection>
|
Props
| Name | Value | Required | Description |
disabled |
boolean | Disables the card. |
Slots
| Tag | Slot Name | Required | Value | Example |
|---|---|---|---|---|
<div> |
input
|
input radio | <input type="radio" id="radio" name="radio-group" value="radio1" > <label htmlFor="radio">Label 1</label> |
|
<div> |
input
|
input checkbox | <input type="checkbox" id="checkbox" name="checkbox-group" value="checkbox" > <label htmlFor="checkbox">Label 1</label> |
|
<div> |
input
|
input toggle | <s-toggle aria-label="power switch" id="power-toggle" checked="false"></s-toggle> <div class="toggle-label"> Label1</div> |
|
<img> or <svg> |
media |
<img src="image-url" slot="media" alt="descriptive text" /> |
||
<div> |
description |
<div slot="description">Add a brief description or supporting details about the topic.</div> |
||
<s-tag> or <s-badge> |
status |
<s-badge slot="status" count="1" aria-label="1 unread message"></s-badge> |
Classes
| Name | Value | Description |
div.card-container |
Add this class to the parent of all cards to enable responsive behavior. Cards can also be placed using the grid. | |
active
|
Applies a background color to indicate an active card. |
Skylab React links
Guidelines
Updating active cards
You may update the active card by programmatically modifying the input's checked
attribute in HTML. This
change will be monitored by the s-card-selection and will cause the active class to be
added/removed.
If you modify the input's checked property in JS, you must also add/remove the
active class to the
s-card-selection.
A radio s-card-selection does not have a checked attribute, so you must use the JS property.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com