Use selection boxes when users must make a choice or answer a standalone question before proceeding with a one-time process such as a setup or configuration task. Selection boxes represent the only decision on a page.
Use selection boxes when options are abstract or potentially unfamiliar to users. Use icons and descriptions to provide additional insight.
Don't use selection boxes for repeatable tasks such as data entry. Use other selection controls, such as checkboxes or radio buttons, instead.
Don't use selection boxes for fewer than 3 options or more than 12 options. Use other selection controls instead.
Don't use selection boxes for fewer than 3 options or more than 12 options. Use other selection controls instead.
Use icons to add meaning and help users distinguish between options.
Use descriptions to add meaning and help users distinguish between options.
On smaller viewports, selection boxes hide their icons and use smaller typography and tighter spacing.
Unselected | ![]() |
Hover | ![]() |
Focus | ![]() |
Selected | ![]() |
Disabled | ![]() |
Keep headers and descriptions short and concise. Descriptions can be partial or complete sentences, but don't use more than a single sentence.
Selection boxes are center-aligned within a container based on the number of options and the container's width. Don't use other layouts with selection boxes.
@skyux/forms
View in NPM | View in GitHub None found. npm install --save-exact @skyux/forms
None found. import { SkySelectionBoxModule } from '@skyux/forms';
Selector: sky-selection-box
Creates a button to present users with a choice or question before proceeding with a one-time process.
control: SkyCheckboxComponent | SkyRadioComponent | undefined
The radio button or checkbox to display in the selection box.
Selector: sky-selection-box-header
Specifies the header to display in a selection box.
Selector: sky-selection-box-description
Specifies the description to display in a selection box.
Selector: sky-selection-box-grid
Creates a grid layout for an array of selection boxes.
SKY UX test harnesses are built upon Angular CDK component harnesses. For more information see the Angular CDK component harness documentation.
import { SkySelectionBoxHarness } from '@skyux/forms/testing';
Harness to interact with a selection box component in tests.
getControl(): Promise<SkyCheckboxHarness | SkyRadioHarness>
Gets the checkbox or radio harness for the selection box form control.
Promise<SkyCheckboxHarness | SkyRadioHarness>
getDescriptionText(): Promise<string>
Gets the selection box description text.
Promise<string>
getHeaderText(): Promise<string>
Gets the selection box header text.
Promise<string>
getIcon(): Promise<null | SkyIconHarness>
Gets the selection box icon, if it exists.
Promise<null | SkyIconHarness>
SkySelectionBoxHarness.with(filters: SkySelectionBoxHarnessFilters): HarnessPredicate<SkySelectionBoxHarness>
Gets a HarnessPredicate
that can be used to search for a
SkySelectionBoxHarness
that meets certain criteria.
filters: SkySelectionBoxHarnessFilters
HarnessPredicate<SkySelectionBoxHarness>
A set of criteria that can be used to filter a list of SkySelectionBoxHarness
instances.
interface SkySelectionBoxHarnessFilters {
dataSkyId?: string | RegExp;
}
dataSkyId?: string | RegExp
Only find instances whose data-sky-id
attribute matches the given value.
import { SkySelectionBoxGridHarness } from '@skyux/forms/testing';
Harness for interacting with a selection box grid component in tests.
getSelectionBox(filter: SkySelectionBoxHarnessFilters): Promise<SkySelectionBoxHarness>
Gets a harness for a specific selection box that meets certain criteria.
filter: SkySelectionBoxHarnessFilters
Promise<SkySelectionBoxHarness>
getSelectionBoxes(filters?: SkySelectionBoxHarnessFilters): Promise<SkySelectionBoxHarness[]>
Gets an array of selection boxes.
filters?: SkySelectionBoxHarnessFilters
Promise<SkySelectionBoxHarness[]>
SkySelectionBoxGridHarness.with(filters: SkySelectionBoxGridHarnessFilters): HarnessPredicate<SkySelectionBoxGridHarness>
Gets a HarnessPredicate
that can be used to search for a
SkySelectionBoxGridHarness
that meets certain criteria.
filters: SkySelectionBoxGridHarnessFilters
HarnessPredicate<SkySelectionBoxGridHarness>
A set of criteria that can be used to filter a list of SkySelectionBoxGridHarness
instances.
interface SkySelectionBoxGridHarnessFilters {
dataSkyId?: string | RegExp;
}
dataSkyId?: string | RegExp
Only find instances whose data-sky-id
attribute matches the given value.
Loading...