v2.0.0
Form

Native Select

Styles native select controls while preserving platform behavior.

Imports

Use the same component slug for React, Vue, and style token lookup. Do not import components from package roots.

import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@line/abc-def-react/native-select";
<script setup lang="ts">
import { NativeSelect, NativeSelectOption, NativeSelectOptGroup } from "@line/abc-def-vue/native-select";
</script>

Shadcn references

Compare the corresponding shadcn React and Vue documentation for the same component slug.

React shadcnVue shadcn

Basic usage

import {
  NativeSelect,
  NativeSelectOption,
} from "@line/abc-def-react/native-select";

export function Example() {
  return (
    <NativeSelect defaultValue="semantic">
      <NativeSelectOption value="semantic">Semantic tokens</NativeSelectOption>
      <NativeSelectOption value="component">Component tokens</NativeSelectOption>
    </NativeSelect>
  );
}
<script setup lang="ts">
import {
  NativeSelect,
  NativeSelectOption,
} from "@line/abc-def-vue/native-select";
</script>

<template>
  <NativeSelect default-value="semantic">
    <NativeSelectOption value="semantic">Semantic tokens</NativeSelectOption>
    <NativeSelectOption value="component">Component tokens</NativeSelectOption>
  </NativeSelect>
</template>

Component tokens

Component TokenSemantic TokenDefault Primitive Token
--native-select-ring--ring--color-zinc-400
--native-select-bgLiteral valuetransparent
--native-select-bg-dark--border-input--color-zinc-200
--native-select-bg-dark-hover--border-input--color-zinc-200
--native-select-border--border-input--color-zinc-200
--native-select-border-destructive--destructive--color-red-50
--native-select-placeholder-fg--muted-foreground--color-zinc-500
--native-select-selection-bg--primary--color-zinc-900
--native-select-selection-fg--primary-foreground--color-zinc-50
--native-select-icon-fg--muted-foreground--color-zinc-500
--native-select-option-bgLiteral valueCanvas
--native-select-option-fgLiteral valueCanvasText

Composition exports

NativeSelectNativeSelectOptionNativeSelectOptGroup

Usage notes

  • Use for short or medium static option sets.
  • Prefer native behavior when mobile platform consistency matters.
  • Related component tokens use the `native-select` token group in `@line/abc-def-styles/css`.