Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
Cloudscape Design System
  • Get started
  • Foundation
  • Components
  • Patterns
  • Demos
  • GitHub 
  • About

Patterns


  • General

    • Actions
      • Global actions
      • In-context actions
    • Announcing new features
    • Announcing beta and preview features
    • Communicating unsaved changes
    • Data visualization
      • Chart metric drill down
    • Density settings
    • Disabled and read-only states
    • Drag-and-drop
    • Errors
      • Error messages
      • Validation
    • Empty states
    • Feedback mechanisms
    • Filtering patterns
      • Saved filter sets
      • Filter persistence in collection views
    • Hero header
    • Help system
    • Image magnifier
    • Loading and refreshing
    • Onboarding
      • Hands-on tutorials
    • Selection in forms
    • Service navigation
      • Side navigation
      • Top navigation
    • Service Dashboard
      • Static dashboard
      • Configurable dashboard
      • Dashboard items
    • Secondary panels
    • Timestamps
    • User feedback

  • Generative AI patterns

    • Pattern abstraction
    • Generative AI chat
    • Ingress
    • Generative AI output label
    • Generative AI loading states
    • Progressive steps

  • Resource management

    • Create resource
      • Multipage create
      • Single page create
      • Sub resource create
    • Delete patterns
      • One-click delete
      • Delete with simple confirmation
      • Delete with additional confirmation
    • Edit resource
      • Page edit
      • Inline edit
      • Attribute editing
    • View resources
      • Table view
      • Card view
      • Split view
      • Table with expandable rows
    • Resource details
      • Details page
      • Details page with tabs
      • Details page as a hub
  1. Cloudscape Design System
    • Patterns
    • General: Selection in forms
    1. Cloudscape Design System
    2. Patterns
    3. General: Selection in forms

    Selection in forms

    Form elements that allow users to select one or more options from a list, or turn on and off an option.

    Published: June 5, 2020

    On this page

    1. Components
    2. Key UX concepts
    3. Single selection criteria
    4. Multi-selection criteria
    5. Boolean selection criteria
    6. General guidelines
    7. Writing guidelines

    Did this page help you?

    Tell us more - optional

    1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.

    Components

    Depending on the type of selection (single- or multi-), you can choose between different types of patterns.

    Toggle

    Toggles enable users to turn an option on or off, and can result in an immediate change.

    Radio group

    Radio group enable users to choose one option from a predefined set.

    Select

    Selects enable users to choose a single item from a list of items.

    Checkbox

    Checkboxes enable users to turn an option on or off.

    Tiles

    Tiles enable users to choose one of a predefined set of options, including additional metadata to facilitate comparisons or progressive disclosure.

    Multiselect

    Multiselects enable users to choose multiple items from a list of options.

    Autosuggest

    Autosuggest enables users to choose from a list of suggestions.

    Key UX concepts

    Selection patterns

    Within a form, you can provide users with predefined options to choose from. To determine which component to use, it’s important to consider whether users can select one or multiple options, the number of options they can choose from, and whether they need additional metadata to support the selection. Depending on your use case the following are the common types of selections:

    • Single selection: useful when users need to select one option out of a list with two or more choices.

    • Multi-selection: useful when users need to select one or multiple options out of a list.

    • Boolean selection: useful when users need to select one option that turns on or off a setting.

    Progressive disclosure

    With progressive disclosure, information or functionality is revealed as a result of a user action. This reduces how much information a user has to consume at one time and the information density on the page. As users indicate that they want to progress their interaction, additional content and more advanced functionality are progressively revealed. Users can make a binary choice, such as on/off, activated/deactivated, enabled/disabled.

    Example of progressive disclosure via checkbox

    This service automatically identifies the language in your media. You can also select a specific language.
    Choose another language (non-default)
    Select the language you want to use.

      Single selection criteria

      Single selection patterns are useful when users need to make a single, mutually exclusive choice from a set of options. It simplifies decision-making and is appropriate when users are expected to choose just one option that best fits their needs.

      Refer to the criteria table below to identify the best component for your use cases.

      Radio groupTilesSelectAutosuggest
      Number of options2 to 7 options2 to 7 options8+ options8+ options, including user generated inputs
      Additional metadata per optionDescriptionsDescriptions, lists, and/or imagesIcons, descriptions, and/or tagsIcons, descriptions, and/or tags

      Number of items

      The fastest way for users to find and select an option in a list of seven or fewer options is to see all the options at once as a group of checkboxes, radio buttons, or tiles. For groups of eight or more options, we recommend using a select or autosuggest list. This will reduce the space the selection pattern takes on the page and help the user find options within larger groups.

      Additional metadata

      Sometimes users can make faster, more informed decisions by seeing descriptions, icons (such as database types), or by having comparative details across all options in the list (such as instance storage amount, RAM, or cost). In these cases, use the pattern that works best with the metadata you have.

      Multi-selection criteria

      Multi-selection patterns are beneficial when users need to make multiple selections from a list or set of options. It provides flexibility and allows users to choose multiple items or criteria simultaneously.

      Refer to the criteria table below to identify the best component for your use cases.

      CheckboxMultiselect
      Number of options2 to 7 boolean options grouped below a form field label8+ options
      Additional metadata per optionDescriptionsIcons, descriptions, and or tags

      Number of items

      The fastest way for users to find and select an option in a list of seven or fewer options is to see all the options at once as a group of checkboxes. For groups of eight or more options, we recommend using a multiselect list. This will reduce the space the selection pattern takes on the page and to help the user find options within larger groups.

      Additional metadata

      Sometimes users can make faster, more informed decisions by seeing descriptions, icons (such as database types), or by having comparative details across all options in the list (such as instance storage amount, RAM, or cost). In these cases, use the pattern that works best with the metadata you have.

      Boolean selection criteria

      Boolean selection is commonly used to activate/deactivate, enable/disable, or turn on/turn off settings, features, or functionalities. Users can choose between two exclusive options, typically represented as "true" (selected) or "false" (not selected).

      To provide effective boolean options take into account the following considerations:

      • Evaluate whether the selection results in an immediate change visible within the same UI, for example turn on/ turn off light and dark modes.

      • Determine if the selection activates or deactivates a group of sub-elements, for example in case of progressive disclosure.

      • Assess if the off option to deactivate/disable/turn off requires a description to provide clarity, or if the option that activates/enable/turn on is sufficient to understand the consequences of the selection.

      • Decide whether it is necessary to explicitly display both options to highlight the implications of both options.

      Refer to the criteria table below to identify the best component for your use case.

      CheckboxToggleRadio groupTiles
      SelectionThe selection takes effect at form submission.The selection results in an immediate change. For example, turning on dark mode.The selection takes effect at form submission.The selection takes effect at form submission.
      Sub-optionsThe option's sub-elements should not include checkboxes. Checkboxes are used to activate and deactivate groups of sub-elements elsewhere on the page.The option's sub-elements should not include toggles. Toggles are used to activate and deactivate groups of elements elsewhere on the page. The option's sub-elements should not include radio groups.The option's sub-elements should not include tiles.
      Additional metadataAdditional metadata, such as a description, can be included only in the selected state. For example, activated, enabled, on.Additional metadata, such as a description, can be included only in the selected state. For example, activated, enabled, on.Additional metadata, such as a description, can be included for both the on and off options.Additional metadata, such as descriptions, lists, and/or images, can be included for both the on and off options.

      Selection

      Binary choices made by using checkboxes, radio groups, and tiles should take effect at form submission, for example in a creation or edit flow. 

      Use a toggle for an option that takes effect immediately, such as turning on a system feature that results in a visible interface change, for example, turn on dark mode.

      Sub-options

      Boolean options can be used to turn on / turn off a group of sub-options, for example users can turn on encryption and then select the preferred encryption type among a list of options. 

      We recommend to provide consistent progressive disclosure patterns within the same page. For example, when using a toggle to activate a setting and checkboxes as sub-options, use the same configuration for other progressive disclosure patterns in the same page.

      Additional metadata

      Sometimes users can make faster, more informed decisions by seeing descriptions, icons, or by having comparative details across all options in the list. 

      We recommend to use radio groups or tiles for options which require additional metadata in both on and off states. You can choose between a checkbox or toggle to turn a group of elements on or off when only the on state requires additional metadata. 

      General guidelines

      Do

      • When using toggles or checkboxes in multiple places in a page to turn groups of elements on and off, use the same parent control, toggle, or checkbox throughout.

      Don't

      • In progressive disclosure patterns, don’t use the same selection control type for the main option and its sub-options. For example, don’t use a checkbox to activate a setting and other checkboxes to display the sub-options. Use a toggle as main control, and checkboxes as sub-options controls.
      • In progressive disclosure patterns, don't include controls in between radio options. Place them after the radio group.

      Writing guidelines

      General writing guidelines

      • Use sentence case, but continue to capitalize proper nouns and brand names correctly in context.

      • Use end punctuation, except in headers and buttons. Don’t use exclamation points.

      • Use present-tense verbs and active voice.

      • Don't use please, thank you, ellipsis (...), ampersand (&), e.g., i.e., or etc. in writing.

      • Avoid directional language.

        • For example: use previous not above, use following not below.

      • Use device-independent language.

        • For example: use choose or select not click.

      Component-specific guidelines

      Headings

      • Use descriptive titles that accurately represent the options.

      Options

      • When the list of options have a group subject (for example, audit log, error log, general log, slow query log) you can avoid including a verb for all the options, and instead include it in the group label.

        • For example: Log exports

      • When using a verb, use present-tense and active voice wherever possible.

        • Toggle: Describe the outcome of the enabled option.

          • For example: dark mode

        • Checkbox: Describe the intent of the enabled option.

          • For example: enable enhance monitoring

        • Radio group: Describe the intent of the options by using label and provide descriptions. Both options should have verbs.

      • Use logical ordering by grouping similar options together, or providing options in an order that would best match the user journey.

      Descriptions

      • Descriptions should have end punctuation, with the only exception being if a description ends with an external link icon, which should not have a period after it.

      • Keep descriptions short, to the point, and free of jargon. Provide any instructions or necessary information quickly. Any detailed descriptions about the service should sit elsewhere (info link, learn more link, card description).

      • Keep sentence structure similar across all grouped options. This provides users familiarity, allowing them to more quickly navigate through the experience.

      Did this page help you?

      Tell us more - optional

      1000 character(s) available. Do not disclose any personal, commercially sensitive, or confidential information.
      • About
      • Connect
      • Privacy 
      • Site terms 
      • © 2025, Amazon Web Services, Inc. or its affiliates. All rights reserved.
      Made with love atAWS