Loading…

Magnetic Select

beta

A honeycomb of round chips: choosing one grows it and magnetically shoves the rest apart, tilted, with a springy settle.

Forms
2 files
1 npm package
Accessibility notes

Playground

Installation

One command and the file is in your project, or copy it in by hand.

$pnpm dlx @dowel-ui/cli add magnetic-select

npm packages installed: class-variance-authority.

Usage

Imported from your own path — the file is yours, so this is an import like any other.

app/page.tsxTSX

import { MagneticSelect } from "@/components/ui/magnetic-select";

Examples

Every example the tests run, live and operable, side by side.

Default
Gallery
With Content
Nineteen
Controlled
Right To Left

API

Generated from the component's own types, so a prop cannot appear here without existing.

<MagneticSelect>

Prop	Type	Default
`options` (required) Up to 19 options: a centre, a ring of six and a ring of twelve. Three form a triangle.	`MagneticSelectOption[]`	—
`bounce` Overshoot, 0–100. 0 settles with no overshoot.	`number`	`55`
`chipSize` Chip diameter in px.	`number`	`44`
`defaultValue` Initial value when uncontrolled.	`string`	—
`disabled` Disables every chip.	`boolean`	`false`
`give` Spring softness, 0–100. Above 50 the chips take longer to settle.	`number`	`50`
`name` Renders a hidden input so the value submits with a form.	`string`	—
`onValueChange` Called with the newly selected value.	`(value: string) => void`	—
`pull` Magnet strength, 0–100: selected scale, push distance and tilt.	`number`	`55`
`stroke`	`boolean`	`false`
`value` Controlled selected value.	`string`	—

Plus every attribute of <div> except defaultValue, onChange, children, selected.

Accessibility

A role="radiogroup" of native buttons with role="radio" and aria-checked, named by each option's `label`; the group needs aria-label or aria-labelledby and warns in development without one. Roving tabindex: Tab reaches the selected chip (or the first), arrow keys move focus and select with wrap-around (Left/Right follow the reading direction in RTL), Home/End jump to the ends. Images and skins are decorative. The spring is a CSS transition, so under reduced motion every chip settles at its final pose immediately; cursor parallax is mouse-only.

Quality

Measured from the source and its tests at build time.

All scores

10/10

checks passed

Tested — passes
axe assertion — passes
Keyboard tested — passes
Storybook examples — passes
Accessibility documented — passes
Semantic tokens only — passes
Motion from tokens — passes
className merged — passes
Visible focus — passes
No fixed widths — passes

Prop

Type

Default

options

Up to 19 options: a centre, a ring of six and a ring of twelve. Three form a triangle.

MagneticSelectOption[]

—

bounce

Overshoot, 0–100. 0 settles with no overshoot.

number

55

chipSize

Chip diameter in px.

number

44

defaultValue

Initial value when uncontrolled.

string

—

disabled

Disables every chip.

boolean

false

give

Spring softness, 0–100. Above 50 the chips take longer to settle.

number

50

name

Renders a hidden input so the value submits with a form.

string

—

onValueChange

Called with the newly selected value.

(value: string) => void

—

pull

Magnet strength, 0–100: selected scale, push distance and tilt.

number

55

stroke

boolean

false

value

Controlled selected value.

string

—