Is the segmented control accessible with a keyboard?

Yes. It is a real radio group under the styling, so arrow keys move between options and focus is visible.

Does the amount input handle decimals safely?

Yes. It formats as you type, keeps a fixed decimal treatment and offers half and max presets so people do not calculate fees by hand.

Segmented control and input components for React

The small controls that carry a lot of the interaction in a dense product. A segmented control that animates between options, an amount field with half and max presets so the maths is not left to the user, a currency toggle, and a preferences card. Small parts, and the ones people touch most.

6 components, installable with the shadcn CLI.

Segmented Control
A hairline pill whose thumb glides between options. Tabular labels, no chrome.
View component
Crypto/Fiat
A dual-denomination field. Type in fiat or units, the toggle carries the value through the rate.
View component
Amount
A money-formatting family so every number in a screen reads the same.
View component
Avatar Stack
Overlapping gradient coins. Hover to lift and name one, the overflow floats the rest.
View component
Preferences Card
Settings rows with an icon tile, a one-line hint, and a chevron that walks in on hover.
View component
Price Scrubber
A scrub chart with a magnet crosshair and a hero number that recolours off the reference price.
View component

Questions

Is the segmented control accessible with a keyboard?: Yes. It is a real radio group under the styling, so arrow keys move between options and focus is visible.
Does the amount input handle decimals safely?: Yes. It formats as you type, keeps a fixed decimal treatment and offers half and max presets so people do not calculate fees by hand.

Browse by type

Install one in a minute

Every component here installs with the shadcn CLI and lands in your project as source you own.

Read the install guide

Segmented control and input components for React