Selection box
Use when
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 when
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.
Icons
Use icons to add meaning and help users distinguish between options.
- Don't use icons if they don't add useful information.
- Don't reuse icons within a group of selection boxes.
- Don't use icons with some selection boxes in a group but not others.
- Don't use selection boxes with titles only. If neither icons nor descriptions are necessary, use other selection controls instead.
Descriptions
Use descriptions to add meaning and help users distinguish between options.
- Don't use descriptions if they don't add useful information.
- Don't use descriptions with some selection boxes in a group but not others.
- Don't use selection boxes with titles only. If neither icons nor descriptions are necessary, use other selection controls instead.
Responsiveness
On smaller viewports, selection boxes hide their icons and use smaller typography and tighter spacing.
States
| 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.
Components
Guidelines
- NPM package
@skyux/formsView in NPM | View in GitHub None found.- Install with NPM
npm install --save-exact @skyux/formsNone 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.
Inputs
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.
Methods
getControl(): Promise<SkyCheckboxHarness | SkyRadioHarness>
Gets the checkbox or radio harness for the selection box form control.
Returns
Promise<SkyCheckboxHarness | SkyRadioHarness>
getDescriptionText(): Promise<string>
Gets the selection box description text.
Returns
Promise<string>
getHeaderText(): Promise<string>
Gets the selection box header text.
Returns
Promise<string>
getIcon(): Promise<null | SkyIconHarness>
Gets the selection box icon, if it exists.
Returns
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.
Parameters
filters: SkySelectionBoxHarnessFilters
Returns
HarnessPredicate<SkySelectionBoxHarness>
A set of criteria that can be used to filter a list of SkySelectionBoxHarness instances.
interface SkySelectionBoxHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
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.
Methods
getSelectionBox(filter: SkySelectionBoxHarnessFilters): Promise<SkySelectionBoxHarness>
Gets a harness for a specific selection box that meets certain criteria.
Parameters
filter: SkySelectionBoxHarnessFilters
Returns
Promise<SkySelectionBoxHarness>
getSelectionBoxes(filters?: SkySelectionBoxHarnessFilters): Promise<SkySelectionBoxHarness[]>
Gets an array of selection boxes.
Parameters
filters?: SkySelectionBoxHarnessFilters
Returns
Promise<SkySelectionBoxHarness[]>
SkySelectionBoxGridHarness.with(filters: SkySelectionBoxGridHarnessFilters): HarnessPredicate<SkySelectionBoxGridHarness>
Gets a HarnessPredicate that can be used to search for a
SkySelectionBoxGridHarness that meets certain criteria.
Parameters
filters: SkySelectionBoxGridHarnessFilters
Returns
HarnessPredicate<SkySelectionBoxGridHarness>
A set of criteria that can be used to filter a list of SkySelectionBoxGridHarness instances.
interface SkySelectionBoxGridHarnessFilters {
dataSkyId?: string | RegExp;
}Properties
dataSkyId?: string | RegExp
Only find instances whose data-sky-id attribute matches the given value.
Loading...