Button
Displays a button or a component that looks like a button.
Input
Displays a form input field or a component that looks like an input field.
Combobox
Builds searchable inputs for choosing predefined options.
Start typing to filter the suggestions, then use the arrow keys and Enter to choose one.
No therapeutic area selected.
Multi-select combobox
Builds a searchable multi-select input that presents selected values as removable chips.
Search and choose any number of areas. Select an area again, or remove its chip, to deselect it.
No therapeutic areas selected.
Textarea
Displays a form textarea or a component that looks like a textarea.
Select
Displays a list of options for the user to pick from.
Checkbox
A control that allows the user to toggle between checked and not checked.
Radio Group
A set of checkable buttons where only one can be checked at a time.
Switch
A control that allows the user to toggle between two states.
Slider
An input where the user selects a value from within a given range.
Value: 45
Calendar
A date field component that allows users to enter and edit date.
Card
Displays a card with header, content, and footer.
The latest results from our Phase III clinical trial show promising outcomes for patient treatment.
Badge
Displays a badge or a component that looks like a badge.
Avatar
An image element with a fallback for representing the user.
Table
A responsive table component.
| Study ID | Phase | Status | Participants |
|---|---|---|---|
| GNE-001 | Phase I | Active | 45 |
| GNE-002 | Phase II | Recruiting | 128 |
| GNE-003 | Phase III | Complete | 512 |
Skeleton
Use to show a placeholder while content is loading.
Progress
Displays an indicator showing the completion progress of a task.
45% complete
Spinner
A loading spinner to indicate that a process is in progress.
Alert
Displays a callout for user attention.
Kbd
A keyboard key indicator component.
Dialog
A modal dialog that interrupts the user with important content.
Alert Dialog
A modal dialog that interrupts the user with important content and expects a response.
Popover
Displays rich content in a portal, triggered by a button.
Tooltip
A popup that displays information related to an element.
Dropdown Menu
Displays a menu to the user triggered by a button.
Tabs
A set of layered sections of content that display one panel at a time.
Overview content goes here. This tab shows general information.
Breadcrumb
Displays the path to the current resource using a hierarchy of links.
Accordion
A vertically stacked set of interactive headings.
Collapsible
An interactive component which expands/collapses a panel.
Separator
Visually or semantically separates content.
CS CoE Components
An open-source UI component library.
Aspect Ratio
Displays content within a desired ratio.
Scroll Area
Augments native scroll functionality for custom, cross-browser styling.
Toggle
A two-state button that can be either on or off.