Native Select

1export { default as NativeSelect } from "./native-select.svelte";2export { default as NativeSelectOption } from "./native-select-option.svelte";3export { default as NativeSelectOptGroup } from "./native-select-opt-group.svelte";4

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import type { HTMLOptgroupAttributes } from "svelte/elements"
4
5interface Props extends HTMLOptgroupAttributes {}
6
7let { class: className, children, ...rest }: Props = $props()
8</script>
9
10<optgroup
11  data-scope="native-select"
12  data-part="optgroup"
13  data-slot="native-select-optgroup"
14  class={cn(className)}
15  {...rest}
16>
17  {@render children?.()}
18</optgroup>

1<script lang="ts">
2import type { HTMLOptionAttributes } from "svelte/elements"
3
4interface Props extends HTMLOptionAttributes {}
5
6let { children, ...rest }: Props = $props()
7</script>
8
9<option data-scope="native-select" data-part="option" data-slot="native-select-option" {...rest}>
10  {@render children?.()}
11</option>

1<script lang="ts">
2import { cn } from "@/lib/utils"
3import { ChevronDownIcon } from "lucide-svelte"
4import type { HTMLSelectAttributes } from "svelte/elements"
5
6interface Props extends Omit<HTMLSelectAttributes, "size"> {
7  size?: "sm" | "default"
8}
9
10let { class: className, size = "default", children, ...rest }: Props = $props()
11</script>
12
13<div
14  class={cn(
15    "group/native-select relative w-fit has-[select:disabled]:opacity-50",
16    className
17  )}
18  data-scope="native-select"
19  data-part="root"
20  data-slot="native-select-root"
21  data-size={size}
22>
23  <select
24    data-slot="native-select"
25    data-size={size}
26    class="border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 h-8 w-full min-w-0 appearance-none rounded-lg border bg-input/30 py-1 pr-8 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] data-[size=sm]:py-0.5 outline-none disabled:pointer-events-none disabled:cursor-not-allowed"
27    {...rest}
28  >
29    {@render children?.()}
30  </select>
31  <ChevronDownIcon class="text-muted-foreground top-1/2 right-2.5 size-4 -translate-y-1/2 pointer-events-none absolute select-none" aria-hidden="true" data-slot="native-select-icon" />
32</div>