Components
Inputs, selects and checkboxes
Use native form controls with the existing surface and focus vocabulary.
On this page
Purpose and composition
Use native form controls with the existing surface and focus vocabulary.
Use for simple choice and text; searchable email identity uses the recipient field family.
Anatomy
| Part | Responsibility |
|---|---|
| Input | 44px control with border, text and placeholder |
| Select | Native option control |
| IconSelect | Hidden label, leading icon and trailing chevron |
| Checkbox | Native state; violet accent |
Configuration and variants
| Input / variant | Contract |
|---|---|
| Input | forwardRef; native input attributes and className |
| Select | Native select props and option children |
| IconSelect | Required icon/label; optional wrapperClassName; forwards select props |
| Checkbox | Parent supplies checked, disabled and onChange |
States and feedback
| State | Visible / behavioral result |
|---|---|
| Focus | Input border + low-alpha violet ring |
| Selected | Native value remains visible |
| Disabled | Native interaction disabled; source style may inherit |
| Inherited | Checked + disabled with explicit Included/Inherited text |
Interaction and responsive behavior
- Wrap Input in a visible label.
- Keep options as source value strings or stable IDs.
- Use width utilities on Select; it is not full width by default.
- At phone sizes multi-column field groups stack.
Accessibility contract
- Use label association; IconSelect includes an accessible name.
- Do not assume type=email blocks a callback outside a validated form submission.
- Keep disabled explanations readable.
Known implementation limits
Shared Input has no integrated error/help description API. Parent must add aria-invalid, aria-describedby and validation copy.
Composition example
<label>Workspace name<Input value={name} onChange={e => setName(e.target.value)} /></label>Source references
| File | Responsibility |
|---|---|
| components/ui/primitives.tsx | Input, Select and IconSelect |
| components/views/team-view.tsx | Native checkbox hierarchy |
Examples from the app
Actual Sonarist components with fictional conversations, people, example.com addresses and simulated operational states. Captured at 2× resolution or higher. Select an image to inspect it full size.
Related topics
Source audit: 2026-10-08 · Revision 10f45d1377b5 · Documentation v1.0.0