Components
Contents
This is an internal playground for some React components that are used throughout the site.
If you're looking for components to be used in articles (like blog posts and docs), check out the MDX components handbook page.
Open graph image templates
Form elements
<OSInput />
Basic examples
Sizes
Label directions
Width options
Features
Enter your primary email address
Error states
Please enter a valid email address
This field is required
Complex examples
We'll use this for account notifications
<OSTextarea />
Basic examples
Features
Please be as detailed as possible
Error states
Message must be at least 10 characters
<Fieldset />
Group related form fields
Complete form examples
Two-column form
Tell us what you're looking for
Inline form with consistent label widths
Data scheme variations
Primary scheme inputs
These inputs use dataScheme="primary" on a secondary background
Secondary scheme inputs
These inputs use dataScheme="secondary" on a primary background
<OSSelect />
Basic examples
Sizes
Label directions
Features
Choose the appropriate status for this item
Searchable selects
Error states
Please select a valid option
Complex examples
This will determine who has access to this project
<Combobox />
A multi-select combobox component with search, keyboard navigation, and optional creation of new options. Perfect for tags, categories, and multi-value selections.
Basic example (with creation enabled)
Type to search or create new tags
Without creation (predefined options only)
Choose from existing team members
Error state
At least one category is required
Please select at least one category
Key features
- Multi-select with visual chips for selected items
- Search/filter options by typing
- Keyboard navigation (Arrow Up/Down, Enter, Escape, Backspace)
- Optional creation of new options (allowCreate prop)
- Click to select/deselect items
- Remove items by clicking X or using Backspace
- Checkmark indicator for selected items in dropdown
- Auto-scrolling for keyboard navigation
<Checkbox />
A checkbox component built with Radix UI. Supports controlled and uncontrolled states, disabled state, and custom styling.
Basic examples
Data scheme variations
Primary scheme
Secondary scheme
Form integration
Key features
- Built on Radix UI for accessibility
- Controlled and uncontrolled modes
- Disabled state support
- Data scheme variations (primary/secondary)
- Required field support
- Custom styling via className prop
- Keyboard accessible
- ARIA compliant
<TeamMemberMultiSelect />
A complex multi-select component for choosing team members from small teams. Features collapsible team sections, search functionality, avatar display, and deduplication across teams.
Basic example
Select team members for this project
Error state
At least one team member is required
Please select at least one team member
Key features
- Multi-select with avatar chips for selected members
- "All members" checkbox to select/deselect everyone
- Collapsible team sections using Radix UI Accordion
- Team-level checkboxes to select/deselect all team members
- Search functionality filtering team and member names
- Auto-expand teams with matching members when searching
- Member deduplication by squeakId across multiple teams
- Avatar display with colored backgrounds (like TeamMember component)
- Selection count badges on team headers (e.g., "2/3 selected")
- Tooltip on chips showing team affiliations
- Keyboard navigation (Escape to close, Backspace to remove last)
- Receives data as props for flexibility
Data structure
The component receives teams with nested profiles and returns selected members with full metadata:
// Teams prop structure
teams: Array<{
id: string
name: string
slug: string
miniCrest?: { data: { attributes: { url: string } } }
profiles: {
data: Array<{
id: string
attributes: {
squeakId: string
firstName: string
lastName: string
companyRole?: string
avatar?: { data: { attributes: { url: string } } }
color?: string
}
}>
}
}>
// Value/onChange structure
SelectedMember: {
squeakId: string
firstName: string
lastName: string
avatar?: { url: string }
color?: string
teams: string[] // Team names
}Competitor feature matrix
Comprehensive view of all product and platform features across competitors. This serves as internal tooling for QA, content creation, and identifying gaps in competitive data.
Error Tracking Features
Session Replay Features
Platform Features
useCustomers
All customer logos with normalized sizing
