Prompt Input
Prompt Inputs allows users to select one or multiple options from a list.
Anatomy
-
Label: Title of the Prompt.
-
Input Container: Rectangular container that houses selected options and the icon.
-
Pill Stack (Conditional): Selection options are represented in a pill.
-
Hint Text (Optional): Helper text for additional context
-
Prompt Icon: Trailing system icon for prompts
Usage Guidance
Prompt input is part of the larger Prompt component.
-
Tapping on the Prompt Input opens a full-size Bottom Sheet holding a List of single or multi-select options.
-
Selected items should be represented by a Pill in the input container.
-
Use
wd-system-icon-promptin the Prompt Input suffix.
When to Use
-
When users need to choose options from a Prompt.
-
If the number of options is large or unknown.
-
If options are dynamic and frequently change.
When to Use Something Else
-
Use a Text Input or Text Area to collect freeform content from users.
-
Use a Number Input to enter numeric data.
-
Use a Date Input to capture dates.
-
Use a Switch if options are a binary Yes or No
-
Use a Select if options are predetermined (not dynamic) the set is small.
-
Consider inline Radio or Checkboxes if it’s useful to see options in context to other page elements.
Examples
Basic Example
Required
Use the required property to indicate that the input is mandatory. Users may not proceed until a
selection has been made. Required inputs are denoted by a red asterisk placed trailing to the label.
Pills in non-required prompts are always removable.
Required with Selection
If the Prompt is required and a selection has been made, the last Pill should not be removable.
Disabled
Utilize the disabled property to prevent user interaction with the Prompt.
Multi-select
Set multi-select to true if users can select more than one option.
Multi-select with overflow
When the stack of pills start to exceed the height of 3 rows, hide additional selections with a text only Tertiary Button.
Overflow
Collapsed
Multi-select prompts use a grid layout to display selected options.
Up to three rows of Pills are displayed by default. The rest are hidden by an Overflow Button that expands the Input Container to display all selections.
Expanded
Tapping on the Tertiary Button will expand the Prompt Input to show all expanded instances.
Hint
Hint Text
Set hintText to true to display contextual messaging below the Input Container.
Error States
Warning
Error
Accessibility Guidelines
Coming soon…
Content Guidelines
- Labels for Prompt Inputs are written in Title Case.
Anatomy
-
Label: Title of the Prompt.
-
Input Container: Rectangular container that houses selected options and the icon.
-
Pill Stack (Conditional): Selection options are represented in a pill.
-
Hint Text (Optional): Helper text for additional context
-
Prompt Icon: Trailing system icon for prompts
Usage Guidance
Prompt input is part of the larger Prompt pattern.
-
Tapping on the Prompt Input opens a full-size Bottom Sheet holding a List of single or multi-select options.
-
Selected items should be represented by a Pill in the input container.
-
Use
wd-system-icon-promptin the Prompt Input suffix.
When to Use
-
When users need to choose options from a Prompt.
-
If the number of options is large or unknown.
-
If options are dynamic and frequently change.
When to Use Something Else
-
Use a Text Input or Text Area to collect freeform content from users.
-
Use a Number Input to enter numeric data.
-
Use a Date Input to capture dates.
-
Use a Switch if options are a binary Yes or No
-
Use a Select if options are predetermined (not dynamic) the set is small.
-
Consider inline Radio or Checkboxes if it’s useful to see options in context to other page elements.
Examples
Basic Example
Required
Use the required property to indicate that the input is mandatory. Users may not proceed until a
selection has been made. Required inputs are denoted by a red asterisk placed trailing to the label.
Pills in non-required prompts are always removable.
Required with Selection
If the Prompt is required and a selection has been made, the last Pill should not be removable.
Disabled
Utilize the disabled property to prevent user interaction with the Prompt.
Multi-select
Set multi-select to true if users can select more than one option.
Multi-select with overflow
When the stack of pills start to exceed the height of 3 rows, hide additional selections with a text only Tertiary Button.
Overflow
Collapsed
Multi-select prompts use a grid layout to display selected options.
Up to three rows of Pills are displayed by default. The rest are hidden by an Overflow Button that expands the Input Container to display all selections.
Expanded
Tapping on the Tertiary Button will expand the Prompt Input to show all expanded instances.
Hint
Hint Text
Set hintText to true to display contextual messaging below the Input Container.
Error States
Warning
Error
Accessibility Guidelines
Coming soon…
Content Guidelines
- Labels for Prompt Inputs are written in Title Case.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.