{"name":"select","type":"registry:ui","files":[{"type":"registry:file","target":"select/RULES.md","highlightedContent":"

# Select 设计规范\n\n- 用于从一组固定选项中选值：2–5 个且需要一眼看全的选项用 Radio Group，需要搜索大量选项用 Popover + Command，触发操作而不是选值用 Dropdown Menu；需要原生行为（移动端系统选择器）时用 Native Select。\n- `Select.Root` 必须设 `type=\"single\"` 或 `type=\"multiple\"`；值是字符串（多选为字符串数组），用 `bind:value` 绑定。\n- 把选项数组传给 `Select.Root` 的 `items`，触发器里用 `<Select.Value placeholder=\"…\" />` 显示选中项的文字；表单提交时设 `name`。\n- `Select.Trigger` 设 `id` 并用 `Field.Label for={id}` 关联（检查规则 `valar/input-label`）；错误状态用 `aria-invalid=\"true\"`（检查规则 `valar/invalid-via-aria`）。\n- 尺寸用 `Select.Trigger` 的 `size` 属性（`sm`、`default`），宽度用 `w-*` 档位；不要用 `class` 改高度或圆角。\n- 选项多时用 `Select.Group` + `Select.Label` 分组，组间用 `Select.Separator`；每个 `Select.Item` 同时设 `value` 和 `label`。\n

"},{"type":"registry:file","target":"select/index.ts","highlightedContent":"

import Content from \"./select-content.svelte\";\nimport GroupHeading from \"./select-group-heading.svelte\";\nimport Group from \"./select-group.svelte\";\nimport Item from \"./select-item.svelte\";\nimport Label from \"./select-label.svelte\";\nimport Portal from \"./select-portal.svelte\";\nimport ScrollDownButton from \"./select-scroll-down-button.svelte\";\nimport ScrollUpButton from \"./select-scroll-up-button.svelte\";\nimport Separator from \"./select-separator.svelte\";\nimport Trigger from \"./select-trigger.svelte\";\nimport Value from \"./select-value.svelte\";\nimport Root from \"./select.svelte\";\n\nexport {\n  Root,\n  Group,\n  Label,\n  Item,\n  Content,\n  Trigger,\n  Separator,\n  ScrollDownButton,\n  ScrollUpButton,\n  GroupHeading,\n  Portal,\n  Value,\n  //\n  Root as Select,\n  Group as SelectGroup,\n  Label as SelectLabel,\n  Item as SelectItem,\n  Content as SelectContent,\n  Trigger as SelectTrigger,\n  Separator as SelectSeparator,\n  ScrollDownButton as SelectScrollDownButton,\n  ScrollUpButton as SelectScrollUpButton,\n  GroupHeading as SelectGroupHeading,\n  Portal as SelectPortal,\n  Value as SelectValue,\n};\n

"},{"type":"registry:file","target":"select/select-content.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import { cn, type WithoutChild } from \"$lib/utils.js\";\n  import type { WithoutChildrenOrChild } from \"$lib/utils.js\";\n  import SelectPortal from \"./select-portal.svelte\";\n  import SelectScrollDownButton from \"./select-scroll-down-button.svelte\";\n  import SelectScrollUpButton from \"./select-scroll-up-button.svelte\";\n  import type { ComponentProps } from \"svelte\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    sideOffset = 4,\n    portalProps,\n    children,\n    preventScroll = true,\n    ...restProps\n  }: WithoutChild<SelectPrimitive.ContentProps> & {\n    portalProps?: WithoutChildrenOrChild<ComponentProps<typeof SelectPortal>>;\n  } = $props();\n</script>\n\n<SelectPortal {...portalProps}>\n  <SelectPrimitive.Content\n    bind:ref\n    {sideOffset}\n    {preventScroll}\n    data-slot=\"select-content\"\n    class={cn(\n      \"bg-popover text-popover-foreground data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 min-w-36 rounded-lg shadow-md ring-1 duration-100 relative z-50 max-h-(--bits-select-content-available-height) origin-(--bits-select-content-transform-origin) overflow-x-hidden overflow-y-auto\",\n      className\n    )}\n    {...restProps}\n  >\n    <SelectScrollUpButton />\n    <SelectPrimitive.Viewport\n      class={cn(\n        \"h-(--bits-select-anchor-height) w-full min-w-(--bits-select-anchor-width) scroll-my-1\"\n      )}\n    >\n      {@render children?.()}\n    </SelectPrimitive.Viewport>\n    <SelectScrollDownButton />\n  </SelectPrimitive.Content>\n</SelectPortal>\n

"},{"type":"registry:file","target":"select/select-group-heading.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import { cn } from \"$lib/utils.js\";\n  import type { ComponentProps } from \"svelte\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: ComponentProps<typeof SelectPrimitive.GroupHeading> = $props();\n</script>\n\n<SelectPrimitive.GroupHeading\n  bind:ref\n  data-slot=\"select-group-heading\"\n  class={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n  {...restProps}\n>\n  {@render children?.()}\n</SelectPrimitive.GroupHeading>\n

"},{"type":"registry:file","target":"select/select-group.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import { cn } from \"$lib/utils.js\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: SelectPrimitive.GroupProps = $props();\n</script>\n\n<SelectPrimitive.Group\n  bind:ref\n  data-slot=\"select-group\"\n  class={cn(\"scroll-my-1 p-1\", className)}\n  {...restProps}\n/>\n

"},{"type":"registry:file","target":"select/select-item.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import CheckIcon from '@lucide/svelte/icons/check';\n  import { cn, type WithoutChild } from \"$lib/utils.js\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    value,\n    label,\n    children: childrenProp,\n    ...restProps\n  }: WithoutChild<SelectPrimitive.ItemProps> = $props();\n</script>\n\n<SelectPrimitive.Item\n  bind:ref\n  {value}\n  {label}\n  data-slot=\"select-item\"\n  class={cn(\n    \"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2 relative flex w-full cursor-default items-center outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    \"data-highlighted:bg-accent data-highlighted:text-accent-foreground\",\n    className\n  )}\n  {...restProps}\n>\n  {#snippet children({ selected, highlighted })}\n    <span class=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n      {#if selected}\n        <CheckIcon class=\"pointer-events-none\" />\n      {/if}\n    </span>\n    <span class=\"flex flex-1 gap-2 shrink-0 whitespace-nowrap\">\n      {#if childrenProp}\n        {@render childrenProp({ selected, highlighted })}\n      {:else}\n        {label || value}\n      {/if}\n    </span>\n  {/snippet}\n</SelectPrimitive.Item>\n

"},{"type":"registry:file","target":"select/select-label.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { cn, type WithElementRef } from \"$lib/utils.js\";\n  import type { HTMLAttributes } from \"svelte/elements\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    ...restProps\n  }: WithElementRef<HTMLAttributes<HTMLDivElement>> & {} = $props();\n</script>\n\n<div\n  bind:this={ref}\n  data-slot=\"select-label\"\n  class={cn(\"text-muted-foreground px-1.5 py-1 text-xs\", className)}\n  {...restProps}\n>\n  {@render children?.()}\n</div>\n

"},{"type":"registry:file","target":"select/select-portal.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n\n  let { ...restProps }: SelectPrimitive.PortalProps = $props();\n</script>\n\n<SelectPrimitive.Portal {...restProps} />\n

"},{"type":"registry:file","target":"select/select-scroll-down-button.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';\n  import { cn, type WithoutChildrenOrChild } from \"$lib/utils.js\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: WithoutChildrenOrChild<SelectPrimitive.ScrollDownButtonProps> = $props();\n</script>\n\n<SelectPrimitive.ScrollDownButton\n  bind:ref\n  data-slot=\"select-scroll-down-button\"\n  class={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n  {...restProps}\n>\n  <ChevronDownIcon  />\n</SelectPrimitive.ScrollDownButton>\n

"},{"type":"registry:file","target":"select/select-scroll-up-button.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import ChevronUpIcon from '@lucide/svelte/icons/chevron-up';\n  import { cn, type WithoutChildrenOrChild } from \"$lib/utils.js\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: WithoutChildrenOrChild<SelectPrimitive.ScrollUpButtonProps> = $props();\n</script>\n\n<SelectPrimitive.ScrollUpButton\n  bind:ref\n  data-slot=\"select-scroll-up-button\"\n  class={cn(\"bg-popover z-10 flex cursor-default items-center justify-center py-1 [&_svg:not([class*='size-'])]:size-4\", className)}\n  {...restProps}\n>\n  <ChevronUpIcon  />\n</SelectPrimitive.ScrollUpButton>\n

"},{"type":"registry:file","target":"select/select-separator.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Separator } from \"$lib/components/ui/separator/index.js\";\n  import { cn } from \"$lib/utils.js\";\n  import type { Separator as SeparatorPrimitive } from \"bits-ui\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    ...restProps\n  }: SeparatorPrimitive.RootProps = $props();\n</script>\n\n<Separator\n  bind:ref\n  data-slot=\"select-separator\"\n  class={cn(\"bg-border -mx-1 my-1 h-px pointer-events-none\", className)}\n  {...restProps}\n/>\n

"},{"type":"registry:file","target":"select/select-trigger.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n  import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';\n  import { cn, type WithoutChild } from \"$lib/utils.js\";\n\n  let {\n    ref = $bindable(null),\n    class: className,\n    children,\n    size = \"default\",\n    ...restProps\n  }: WithoutChild<SelectPrimitive.TriggerProps> & {\n    size?: \"sm\" | \"default\";\n  } = $props();\n</script>\n\n<SelectPrimitive.Trigger\n  bind:ref\n  data-slot=\"select-trigger\"\n  data-size={size}\n  class={cn(\n    \"border-input data-placeholder:text-muted-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 gap-1.5 rounded-lg border bg-transparent py-2 pr-2 pl-2.5 text-sm transition-colors select-none focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:flex *:data-[slot=select-value]:gap-1.5 [&_svg:not([class*='size-'])]:size-4 flex w-fit items-center justify-between whitespace-nowrap outline-none disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n    className\n  )}\n  {...restProps}\n>\n  {@render children?.()}\n  <ChevronDownIcon class=\"text-muted-foreground size-4 pointer-events-none\" />\n</SelectPrimitive.Trigger>\n

"},{"type":"registry:file","target":"select/select-value.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n\n  let { ref = $bindable(null), ...restProps }: SelectPrimitive.ValueProps = $props();\n</script>\n\n<SelectPrimitive.Value bind:ref data-slot=\"select-value\" {...restProps} />\n

"},{"type":"registry:file","target":"select/select.svelte","highlightedContent":"

<script lang=\"ts\">\n  import { Select as SelectPrimitive } from \"bits-ui\";\n\n  let {\n    open = $bindable(false),\n    value = $bindable(),\n    ...restProps\n  }: SelectPrimitive.RootProps = $props();\n</script>\n\n<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />\n

"}]}

Select

Default

Groups

Scrollable

Disabled

Invalid