G
Gamma
Design catalogue
Source atlas
Search the catalogue
Components
37 results
Reset filters
Elastic segment
A compact selector whose thumb stretches between choices.
Components
Inputs
Color choice
A keyboard-friendly palette that gives a single color a clear selected state.
Components
Inputs
Task check
A native checkbox with a quiet completion animation and supporting detail.
Components
Inputs
Floating field
A native text field with a label that makes room for the entered value.
Components
Inputs
OTP input
A one-time code input with animated entry, paste, validation, and recovery states.
Components
Inputs
Button
A clear action primitive with visual variants, sizes, and a busy state.
Components
Inputs
Switch
A labeled on/off control for immediate settings.
Components
Inputs
Inline edit
A label that becomes an input in place; Enter commits, Escape cancels.
Components
Inputs
Range slider
A native range control with a formatted value, clear bounds and keyboard adjustment.
Components
Inputs
Tag input
Build a set of named tags with explicit add and remove actions, limits and form submission.
Components
Inputs
Choice card group
A native radio group with clear labels and descriptions for choices that need more context.
Components
Inputs
Rating input
Five named native radio choices with cumulative stars and an explicit unrated state.
Components
Inputs
Stepper input
A labeled native number field with bounded decrement and increment actions and an editable empty state.
Components
Inputs
Search field
A labeled native search input with focus-preserving clear and an optional explicit submit action.
Components
Inputs
File dropzone
A native file picker with optional drag and drop, visible selection feedback and file count or size limits.
Components
Inputs
Feature flags table
Inspect environment coverage and rollout percentages with a working toggle for each flag.
Components
Inputs
Bar picker
Choose a value from segmented columns, with one wider, brighter selection and exact accessible amounts.
Components
Inputs
Calendar picker
A six-week calendar for choosing one date, with bounded month browsing and unavailable days.
Components
Inputs
Search combobox
A searchable single-choice field with disabled options, clear, and explicit loading and recovery states.
Components
Inputs
Newsletter capture
A compact email capture that validates, submits, and confirms without losing the field.
Components
Inputs
Plan picker
A billing interval and plan choice with live prices and native radio semantics.
Components
Inputs
Password field
A password input with reveal control, live strength, and visible requirements.
Components
Inputs
Message composer
A chat composer with attachments, character count, pending send, and retry.
Components
Inputs
Filter bar
A compact filter builder with grouped checkboxes, removable chips, and clear all.
Components
Inputs
Mention picker
A composer field that opens a filtered people list after @ and inserts a stable handle.
Components
Inputs
Hold button
A press-and-hold confirmation whose fill rises with elapsed time and cancels on release.
Components
Inputs
Slide commit
A slide-to-confirm action with a shared pointer and keyboard threshold, pending state, and completed pill.
Components
Inputs
Option Wheel
A curved picker that turns a short option set into a tactile wheel controlled by scroll, drag, or arrow keys.
Components
Inputs
Voice Pill
A microphone control that opens into a live recording capsule with a level meter, elapsed time, and a deliberate stop.
Components
Inputs
Jelly Radio
A native radio group of paper-weight chips where the chosen chip swells and nudges its neighbours outward.
Components
Inputs
Pulse Heart
A like button that contracts, flips, and rebounds while its count ticks over.
Components
Inputs
Bell Toggle
A notification pill that rings once, crossfades its label, and reserves its wider state.
Components
Inputs
Curved input
A single-line field whose underline curve follows the caret, with a visible label, hint, and error state.
Components
Inputs
Slosh gauge
A level gauge with a liquid surface that leans with its own velocity and sloshes when the level changes.
Components
Inputs
Wake slider
A thumbless range slider of thin bars where drag speed raises a cosine wake behind the handle.
Components
Inputs
Comet dial
A rotary dial with a comet trail: drag around the arc and the trail stretches with your speed, then flicks home with momentum.
Components
Inputs
Segmented control
One exclusive choice from a short row of options, with counts and icons.
Components
Inputs
Components
Inputs
Elastic segment
A compact selector whose thumb stretches between choices.
Open in Gamma
What to study
Arrow keys, Home, and End move the selected radio and focus together.
The selected thumb and short trail settle in about 400 ms.
Use short, distinct labels; this control does not support dragging across slots.
Topics
React
Inputs
New
Gamma tokens
References
React Bits
Elastic selection reference
Material
Status
New
Source File
src/components/ElasticSegment.tsx
Design System
gamma
Props
Name
items
Type
string[]
Default
—
Description
Distinct choices in visual order.
Name
value / defaultValue
Type
string
Default
First item
Description
Controlled or initial choice.
Name
onChange
Type
(value, index) => void
Default
—
Description
Called when selection changes.
Name
disabled
Type
boolean
Default
false
Description
Blocks selection and keyboard interaction.
Reference URI
Copy reference URI