Components
YDS provides UI components for web and mobile use.
| Preview | Component | Description | Platforms |
|---|---|---|---|
... | Accordion | Hides and reveals sections of related content. | React |
| ActionMenu | Button that opens a dropdown list of actions. | React | |
| 3 | Badge | Indicates notifications, item counts, or contextual information. | React |
BannerNotification | BannerNotification | Displays important temporary messages affecting the entire view. | React |
| BottomSheet | Panel that slides up from the bottom. | React | |
| Button | Triggers an action or confirms a choice. | React React Native | |
| ButtonGroup | Groups buttons for selections, filters, or view toggles. | React | |
| Checkbox | Lets users select one or more options. | React React Native | |
| ChoiceBox | Checkbox wrapped in a card for answer selection. | React | |
| ChoiceButton | Radio button wrapped in a card for answers. | React | |
| ComboboxSingleSelect | Combines a text input with a filterable list. | React | |
| Dialog | Consistent layout for content inside Modal or BottomSheet. | React | |
| DropdownMenu | Selects a value from a list immediately. | React | |
| DropdownMenuGroup | Groups multiple dropdown menus into one control area. | React | |
Description | FormElementDescription | Provides help text below form labels and inputs. | React |
| FormElementLabel | Labels form fields accessibly with visual hierarchy. | React React Native | |
| FormGroupLabel | Labels groups of related form elements. | React | |
| Link | Link | Styled anchor with optional external link icon. | React |
| Menu | Positioned dropdown with keyboard navigation and focus management. | React | |
| Modal | Centered overlay that blocks interaction until dismissed. | React | |
| NavigationTabs | Switches between pages or top-level views. | React | |
Notification | Notification | Highlights success, warning, error, or info messages. | React React Native |
| PageIndicator | Dot-style indicators for current position in a set. | React | |
| ProgressBar | Indicates task completion, determinate and indeterminate states. | React React Native | |
| Radio | Lets users select one option from a set. | React React Native | |
| SearchInput | Lets users find content by entering keywords. | React | |
... | SectionTabs | Switches between content sections within the same page. | React |
| Select | Predefined list for single selection in forms. | React | |
| Spinner | Indicates an ongoing process while content loads. | React React Native | |
| Switch | Toggles between two states, applied immediately. | React | |
| Tag | Tag | Displays a short keyword or status label. | React React Native |
TagFilter | TagFilter | Indicates active filters and allows their removal. | React |
| TagLink | TagLink | Interactive keyword link for navigational context. | React React Native |
| TextArea | Multi-line input for longer free-form responses. | React React Native | |
| TextInput | Single-line field for short structured information. | React React Native | |
| ToastNotification | Short-lived floating message confirming an action. | React |