Native Select

npx shadcn@latest add https://ui.saasflare.io/r/native-select.json

pnpm add @saasflare/ui

"use client"import { NativeSelect, NativeSelectOption } from "@saasflare/ui"/** A styled wrapper around the native HTML select element. */export function Demo() {    return (        <div className="w-full max-w-sm">            <NativeSelect defaultValue="member">                <NativeSelectOption value="owner">Owner</NativeSelectOption>                <NativeSelectOption value="admin">Admin</NativeSelectOption>                <NativeSelectOption value="member">Member</NativeSelectOption>                <NativeSelectOption value="viewer">Viewer</NativeSelectOption>            </NativeSelect>        </div>    )}

"use client"import {    Label,    NativeSelect,    NativeSelectOptGroup,    NativeSelectOption,} from "@saasflare/ui"/** Grouped options using NativeSelectOptGroup, with a label. */export function Demo() {    return (        <div className="flex flex-col gap-2 w-full max-w-sm">            <Label htmlFor="region">Deploy region</Label>            <NativeSelect id="region" defaultValue="fra1">                <NativeSelectOptGroup label="Europe">                    <NativeSelectOption value="fra1">Frankfurt (fra1)</NativeSelectOption>                    <NativeSelectOption value="lhr1">London (lhr1)</NativeSelectOption>                </NativeSelectOptGroup>                <NativeSelectOptGroup label="North America">                    <NativeSelectOption value="iad1">Washington (iad1)</NativeSelectOption>                    <NativeSelectOption value="sfo1">San Francisco (sfo1)</NativeSelectOption>                </NativeSelectOptGroup>            </NativeSelect>        </div>    )}

"use client"import { NativeSelect, NativeSelectOption } from "@saasflare/ui"/** The small and default size variants. */export function Demo() {    return (        <div className="flex flex-col gap-3 w-full max-w-sm">            <NativeSelect size="sm" defaultValue="monthly">                <NativeSelectOption value="monthly">Billed monthly</NativeSelectOption>                <NativeSelectOption value="yearly">Billed yearly</NativeSelectOption>            </NativeSelect>            <NativeSelect size="md" defaultValue="monthly">                <NativeSelectOption value="monthly">Billed monthly</NativeSelectOption>                <NativeSelectOption value="yearly">Billed yearly</NativeSelectOption>            </NativeSelect>        </div>    )}