Light
Medium
Left to right
🇺🇸
Migrated
Skip to sidebar
Skip to canvas
Search for components
⌃ K
Guides
Contributing
Deprecation workflow
Design tokens
Migration guide
Release workflow
Adobe Code of Conduct
Foundations
Corner rounding
Down state
Drop shadow
Components
Accordion
Action bar
Action button
Action group
Action menu
Alert banner
Alert dialog
Asset
Asset card
Asset list
Avatar
Badge
Breadcrumbs
Button
Button group
Calendar
Card
Checkbox
Clear button
Close button
Coach indicator
Coach mark
Color area
Color handle
Color loupe
Color slider
Color wheel
Combobox
Contextual help
Date picker
Dial
Dialog
Divider
Drop indicator
Drop zone
Field group
Field label
Floating action button
Form
Help text
Docs
Default
Skip to canvas
Icon
Illustrated message
In-field button
In-field progress circle
In-line alert
Link
Logic button
Menu
Meter
Miller columns
Modal
Number field
Opacity checkerboard
Pagination
Picker
Picker button
Popover
Progress bar
Progress circle
Radio
Rating
Search field
Side nav
Slider
Split view
Status light
Steplist
Swatch
Swatch group
Switch
Table
Tabs
Tag
Tag group
Text area
Text field
Thumbnail
Toast
Tooltip
Tray
Tree view
Typography
Underlay
Well
Spectrum web components
Recently opened
Help text
Components
Controls
5
Actions
HTML
Accessibility
Interactions
Visual tests
Design (1)
Addons
Name
Description
Default
Control
Hide Content items
Content
Hide Content items
Text
*
string
-
Create a password with at least 8 characters.
Hide Component items
Component
Hide Component items
Size
*
string
-
Choose option...
Small
Medium
Large
Extra-large
Variant
string
-
neutral
negative
Hide State items
State
Hide State items
Disabled
boolean
-
False
True
<
div
class
=
"
spectrum-HelpText-text
"
>
Create a password with at least 8 characters.
</
div
>
Copy
Interaction testing
Interaction tests allow you to verify the functional aspects of UIs. Write a play function for your story and you'll see it run here.
Watch 8m video
Read docs