Skip to content
Get Pro
Forms

Inplace Select

A dropdown that opens over itself: the selected option stays under the cursor and the list unfolds around it, then collapses into the trigger with the chosen row travelling into place.

$149 once · every Pro piece

Customize

Press, drag and release selects in one gesture.

Install

npx shadcn@latest add @obsyde/inplace-select

Needs your licence key · Get Pro

Usage

Import it from where the CLI puts it, or copy the files below by hand.

import { InplaceSelect } from '@/components/obsyde/ember/inplace-select/InplaceSelect';

export function Example() {
  return (
    <InplaceSelect
      label="Weight"
      options="Thin, Light, Regular, Medium, Semibold, Bold, Black"
    />
  );
}

Files

What you get with Pro: plain React, TypeScript and CSS, with no dependencies.

  • ember/inplace-select/InplaceSelect.tsxcomponent
  • ember/inplace-select/inplace-select.cssstyles
  • ember/inplace-select/InplaceSelectDemo.tsxdemo
  • ember/shared/accent.tsshared
  • ember/shared/spring.tsshared
  • ember/shared/ember.cssshared

API

PropTypeDefault
accentAccent'ember' | 'volt' | 'arc''ember'
labelLabelstring'Weight'
optionsOptions (comma-separated)string'Thin, Light, Regular, Mediu…'
valueSelectedstring'Regular'
disabledDisabledbooleanfalse