Best practices for data-c13y-* attributes

For best practices on how and when to use data-c13y-* attributes, see the data-c13y attributes guide.

c13y component contracts

The sections below list the component-specific data-c13y-component values emitted by each component, plus any data-c13y-purpose values the library sets internally on its own controls. Generated from the component source, so it can’t drift from what’s actually shipped. Components that don’t emit any data-c13y-* attributes yet are omitted here.

Alert Dialog

• alert-dialog-description
• alert-dialog-icon
• alert-dialog-popup
• alert-dialog-title

Library-set purpose values: close

Avatar

• avatar

Badge

• badge

Banner

• banner
• button

Library-set purpose values: close

Bottom Sheet

• bottom-sheet-button
• bottom-sheet-description
• bottom-sheet-header
• bottom-sheet-popup
• bottom-sheet-title
• button

Library-set purpose values: back, close

Button

• button

Card

• card

Checkbox

• checkbox
• checkbox-container
• checkbox-description
• checkbox-error
• checkbox-input
• checkbox-label

Checkbox Group

• checkbox-group
• checkbox-group-collection
• checkbox-group-description
• checkbox-group-error
• checkbox-group-label

Dialog

• button
• dialog-body
• dialog-description
• dialog-footer
• dialog-header
• dialog-popup
• dialog-title

Library-set purpose values: close

Empty

• empty
• empty-description
• empty-media
• empty-title

Field

• field
• field-description
• field-error
• field-label

File Upload

• button
• file-upload
• file-upload-input
• file-upload-overlay
• file-upload-preview
• file-upload-text

Library-set purpose values: delete, edit

Filter

• button
• filter-collection
• filter-empty
• filter-option
• filter-popup

Library-set purpose values: open

Loading Spinner

• loading-spinner

Menu

• menu-group-label
• menu-item
• menu-popup
• menu-radio-item
• menu-separator
• menu-sub-menu-trigger

Number Stepper

• button
• number-stepper
• number-stepper-input

Library-set purpose values: decrement, increment

Pill

• pill

Popover

• button
• popover

Library-set purpose values: close

Radio

• radio
• radio-description
• radio-input
• radio-label

Radio Group

• radio-group
• radio-group-description
• radio-group-error
• radio-group-label

Searchable Multi Select

• button
• searchable-multi-select-chip
• searchable-multi-select-empty
• searchable-multi-select-group
• searchable-multi-select-group-label
• searchable-multi-select-input
• searchable-multi-select-item
• searchable-multi-select-item-indicator
• searchable-multi-select-list
• searchable-multi-select-popup
• searchable-multi-select-separator
• searchable-multi-select-value-collection
• searchable-multi-select-value-container
• searchable-multi-select-value-item

Library-set purpose values: clear, open, remove

Searchable Single Select

• button
• searchable-single-select-empty
• searchable-single-select-group-label
• searchable-single-select-input
• searchable-single-select-input-buttons-container
• searchable-single-select-item
• searchable-single-select-popup
• searchable-single-select-separator

Library-set purpose values: clear, open

Search Input

• button
• search-base-input
• search-base-input-input
• search-input

Library-set purpose values: cancel

Segmented Control

• segmented-control
• segmented-control-item

Select

• select-group-label
• select-item
• select-item-indicator
• select-popup
• select-separator
• select-trigger
• select-value

Separator

• separator

Skeleton

• skeleton-avatar
• skeleton-box
• skeleton-text

Style Chip

• style-chip

Switch

• switch
• switch-thumb

Tabs

• tabs
• tabs-content
• tabs-list
• tabs-trigger

Text Area

• text-area

Text Field

• text-field

Toggle

• toggle

Toggle Group

• toggle-group

Tooltip

• tooltip