1

SelectNew

A form select with a two-layer proximity highlight (selected accent tint + muted hover), drawn check animation, and a trigger label morph on selection change.

Dependencies

motion

Interaction Type

Click the trigger to open. Hover or use arrow keys to navigate items. Click or press Enter to select. The trigger label morphs when selection changes.

Props

Options you can pass to customize this component.

Prop
Type
Description
value
string

Controlled selected value.

defaultValue
string

Initial selected value for uncontrolled usage.

onValueChange
(value: string) => void

Called when the selection changes.

disabled
boolean

Disables all items. Defaults to false.

name
string

Name for the hidden native <select> (form integration).

required
boolean

Required for form validation. Defaults to false.

Installation

npx shadcn@latest addhttps://ui.nexvyn.dev/r/select.json

How to use

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@/components/ui/select"

export function Demo() {
  const [value, setValue] = useState("")
  return (
    <Select value={value} onValueChange={setValue}>
      <SelectTrigger>
        <SelectValue placeholder="Choose size" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="small">Small</SelectItem>
        <SelectItem value="medium">Medium</SelectItem>
        <SelectItem value="large">Large</SelectItem>
      </SelectContent>
    </Select>
  )
}

Source Code

Click the code icon in the top-right corner to view the source code.

Contact

Questions or feedback? Reach out anytime.

License & Usage

  • •Free for personal and commercial use
  • •No attribution required
  • •Cannot be resold as a standalone product
  • •Anatomy/blueprint diagrams are licensed separately (CC BY-NC 4.0) and are not for commercial use
// No code loaded.

Selected: none

npx shadcn@latest addhttps://ui.nexvyn.dev/r/select.json