VibeUI

Native Select

Placeholder Required

A native select with a stand-in for the missing placeholder: the empty option is hidden from the list and an unfilled field shows in muted color.

  • select
  • placeholder
  • required
  • validation

Preview

1440pxHost theme

Use it with AI

  1. 1. Copy the link.
  2. 2. Write to your agent in your own words and drop the link into the sentence.
  3. 3. The agent opens the link and installs the component from the registry.

put this in the header: https://vibeui.ru/c/nativeselect-003?lang=en

Show the full instructions

What the link says, spelled out. Use it when your agent cannot open links — paste this text instead.

# Install and place "nativeselect-003" (Placeholder Required) from VibeUI

## 1. Install first — do not skip, do not recreate
Run this exact command before writing any code:
npx shadcn@latest add https://vibeui.ru/r/nativeselect-003.json

Registry item: https://vibeui.ru/r/nativeselect-003.json
Installs to: components/vibeui/nativeselect-003.tsx (the exact path follows this project's components.json aliases).
npm dependencies: none.
Registry dependencies: none.

Install it from the registry. Do not recreate it from the description,
do not substitute a similar component from another library, and do not
rewrite it to match the project's existing style.

## 2. What it is
A native select with a stand-in for the missing placeholder: the empty option is hidden from the list and an unfilled field shows in muted color.

A native select with a placeholder stand-in and a required choice: the empty state shows through :required:invalid. Zero dependencies, one file, no client JS.

## 3. How to use it
import { Nativeselect003 } from "@/components/vibeui/nativeselect-003"

<Nativeselect003
  label="Return reason"
  placeholder="Choose a reason"
  options={["Wrong size", "Arrived damaged"]}
/>

Read the installed file for the full prop list.

## 4. Where to place it
This is a small inline component. Put it exactly where the user asked,
inside the existing markup. Do not create a new page, section or
wrapper for it. If a similar control already sits in that spot,
replace it instead of adding a second one.

Placement: ___
(The user fills this line in. If it is still blank, ask where to put it
instead of guessing.)

## 5. Keep exactly as installed
- the local --vibeui-nativeselect-003-* palette — do not swap it for your theme tokens
- the stand-in as <option value="" disabled hidden>: the empty value arms required, disabled and hidden take it out of the list
- defaultValue="" on the select itself instead of a selected attribute on the option — React complains otherwise
- the select:required:invalid rule: the muted color of an unfilled field rests on it, with no class at all
- the visually hidden expansion of the asterisk — otherwise speech says "asterisk" instead of "required field"
- the block's own light surface: without it the dark label disappears on a dark background

## 6. You may change
- the field name through label, the stand-in text through placeholder and the choices through options
- the focus color through accent
- the stand-in color through the --vibeui-nativeselect-003-muted variable
- the asterisk glyph and its spoken expansion

## 7. Rules
- Older Safari ignores hidden on an option: the stand-in stays in the list, though disabled still blocks picking it.
- A placeholder is not a label: the label has to stay above the field, or nobody remembers what was asked once a value is picked.
- If there are dozens of options and search is needed, that is a combobox case, not a native list.
- Do not lift the CSS variables into globals.css: the component has to stay a single file.

## 8. Verify
- it renders with no console errors;
- it looks like the preview on the VibeUI page you copied this from;
- if it does not, you changed something listed in section 5 — put it back.

For developers

npx shadcn@latest add https://vibeui.ru/r/nativeselect-003.json
https://vibeui.ru/r/nativeselect-003.json

Компонент самодостаточен: один файл, без зависимостей, палитра в локальных переменных --vibeui-nativeselect-003-*. Серверный: из хуков только useId. У select нет атрибута placeholder, поэтому первый пункт всегда выглядит выбранным — здесь роль заглушки играет <option value="" disabled hidden>: она показана в закрытом поле, но недоступна в раскрытом списке. Выбор задаётся через defaultValue="" на самом select, а не атрибутом selected у option: React иначе предупреждает. Пока выбрана заглушка, поле не проходит required, и правило select:required:invalid красит текст приглушённым — состояние «не выбрано» видно без скрипта. Звёздочка помечена aria-hidden, её смысл несёт визуально скрытый текст.

Component source

The same file your agent installs. Here in case you would rather copy it by hand.

import { useId } from "react"
import type { ComponentPropsWithoutRef, CSSProperties } from "react"

export type Nativeselect003Props = Omit<
  ComponentPropsWithoutRef<"select">,
  "children" | "size" | "defaultValue"
> & {
  label?: string
  placeholder?: string
  options?: string[]
  accent?: string
}

// Идея компонента: у select нет placeholder, поэтому первый пункт всегда
// выглядит выбранным — и человек проматывает поле, ничего не выбрав.
// Заглушка сделана пунктом с пустым value, который disabled и hidden:
// он показан в закрытом поле, но недоступен в списке. Пока выбран он,
// select:required:invalid красит текст приглушённым — состояние «пусто»
// видно без единой строчки скрипта.
const STYLES = `
:where([data-vibeui-block="nativeselect-003"]){
--vibeui-nativeselect-003-surface:oklch(1 0 0);
--vibeui-nativeselect-003-surface-border:oklch(0.91 0.006 265);
--vibeui-nativeselect-003-fg:oklch(0.24 0.016 265);
--vibeui-nativeselect-003-muted:oklch(0.58 0.014 265);
--vibeui-nativeselect-003-field-border:oklch(0.85 0.01 265);
--vibeui-nativeselect-003-accent:oklch(0.55 0.2 262);
--vibeui-nativeselect-003-required:oklch(0.58 0.19 25);
--vibeui-nativeselect-003-radius:0.625rem;
--vibeui-nativeselect-003-font:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
[data-vibeui-block="nativeselect-003"]{
box-sizing:border-box;width:100%;max-width:22rem;
padding:1rem;border-radius:0.875rem;
background:var(--vibeui-nativeselect-003-surface);
border:1px solid var(--vibeui-nativeselect-003-surface-border);
font-family:var(--vibeui-nativeselect-003-font);color:var(--vibeui-nativeselect-003-fg);
display:flex;flex-direction:column;gap:0.375rem;
}
[data-vibeui-block="nativeselect-003"] label{
display:inline-flex;align-items:baseline;gap:0.25rem;
font-size:0.875rem;font-weight:600;line-height:1.3;cursor:pointer;
}
[data-vibeui-block="nativeselect-003"] [data-part="star"]{
color:var(--vibeui-nativeselect-003-required);line-height:1;
}
[data-vibeui-block="nativeselect-003"] [data-part="sr"]{
position:absolute;width:1px;height:1px;padding:0;margin:-1px;
overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}
[data-vibeui-block="nativeselect-003"] [data-part="field"]{position:relative;display:flex}
[data-vibeui-block="nativeselect-003"] select{
appearance:none;-webkit-appearance:none;
box-sizing:border-box;width:100%;height:2.5rem;
padding:0 2.25rem 0 0.75rem;
font:inherit;font-size:0.9375rem;line-height:1.2;
color:var(--vibeui-nativeselect-003-fg);
background:var(--vibeui-nativeselect-003-surface);
border:1px solid var(--vibeui-nativeselect-003-field-border);
border-radius:var(--vibeui-nativeselect-003-radius);
cursor:pointer;
transition:border-color .16s ease,box-shadow .16s ease,color .16s ease;
}
/* Пока выбран пустой пункт, поле не проходит required — на этом и
   держится приглушённый цвет заглушки. Отдельного класса не нужно. */
[data-vibeui-block="nativeselect-003"] select:required:invalid{
color:var(--vibeui-nativeselect-003-muted);
}
[data-vibeui-block="nativeselect-003"] select:focus-visible{
outline:none;border-color:var(--vibeui-nativeselect-003-accent);
box-shadow:0 0 0 3px color-mix(in oklab,var(--vibeui-nativeselect-003-accent) 22%,transparent);
}
[data-vibeui-block="nativeselect-003"] option{color:var(--vibeui-nativeselect-003-fg)}
[data-vibeui-block="nativeselect-003"] [data-part="arrow"]{
position:absolute;right:0.875rem;top:50%;pointer-events:none;
width:0.4375rem;height:0.4375rem;
border-right:1.5px solid var(--vibeui-nativeselect-003-muted);
border-bottom:1.5px solid var(--vibeui-nativeselect-003-muted);
translate:0 -0.1875rem;rotate:45deg;
}
@media (prefers-reduced-motion:reduce){[data-vibeui-block="nativeselect-003"] *{animation:none!important;transition:none!important}}
`

/**
 * Нативный select с заглушкой вместо placeholder и обязательным выбором:
 * пустое состояние видно по цвету через :required:invalid. Один файл,
 * ноль зависимостей.
 */
export function Nativeselect003({
  label = "Причина возврата",
  placeholder = "Выберите причину",
  options = [
    "Не подошёл размер",
    "Пришло не то, что заказывали",
    "Товар с браком",
    "Передумал",
  ],
  accent,
  className,
  style,
  ...props
}: Nativeselect003Props) {
  const id = useId()
  const palette = {
    ...(accent ? { "--vibeui-nativeselect-003-accent": accent } : null),
    ...style,
  } as CSSProperties

  return (
    <>
      <style href="vibeui-nativeselect-003" precedence="medium">
        {STYLES}
      </style>
      <div
        data-vibeui-block="nativeselect-003"
        className={className}
        style={palette}
      >
        <label htmlFor={id}>
          {label}
          <span data-part="star" aria-hidden="true">
            *
          </span>
          <span data-part="sr">, обязательное поле</span>
        </label>
        <div data-part="field">
          <select {...props} id={id} name="reason" required defaultValue="">
            <option value="" disabled hidden>
              {placeholder}
            </option>
            {options.map((option) => (
              <option key={option} value={option}>
                {option}
              </option>
            ))}
          </select>
          <span data-part="arrow" aria-hidden="true" />
        </div>
      </div>
    </>
  )
}