Label

Installation

$pnpm dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/label.json

$npx shadcn-svelte@latest add https://uipkge.dev/r/svelte/label.json

$yarn dlx shadcn-svelte@latest add https://uipkge.dev/r/svelte/label.json

$bunx shadcn-svelte@latest add https://uipkge.dev/r/svelte/label.json

Manifest:https://uipkge.dev/r/svelte/label.jsonInstalls to:src/lib/components/ui/label/

Examples

Loading interactive previews…

Props

Name	Type / Values	Default	Required
`children`	`Snippet`	—	optional
`ref`	`HTMLLabelElement \| null`	—	optional

Used by

auth-password-reset auth-sign-in auth-sign-up contact-01 contact-us data-table form form-layouts kanban-task-board login-01 login-02 payment-form project-roadmap register-01 settings-page sidebar-03

[data-used-by-list] { max-height: none !important; overflow: visible !important; } [data-used-by-toggle] { display: none !important; }

Files installed (2)

src/lib/components/ui/label/Label.svelte0.8 kB

<script lang="ts" module>
  import type { Snippet } from 'svelte'
  import type { HTMLLabelAttributes } from 'svelte/elements'

  export interface LabelProps extends HTMLLabelAttributes {
    children?: Snippet
    ref?: HTMLLabelElement | null
  }
</script>

<script lang="ts">
  import { cn } from '$lib/utils'

  let { class: className, children, ref = $bindable(null), ...restProps }: LabelProps = $props()
</script>

<label
  bind:this={ref}
  data-uipkge=""
  data-slot="label"
  class={cn(
    'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
    className,
  )}
  {...restProps}
>
  {@render children?.()}
</label>

src/lib/components/ui/label/index.ts0.1 kB

Raw manifest:https://uipkge.dev/r/svelte/label.json

Related components

advance-selectui

Searchable, async-capable select with keyboard navigation, multi-select, and option grouping. Drop in when the native `<select>` or the basic Select primitive runs out of room — large lists, debounced server-side filtering, custom rendered items.

checkboxui

Standalone or in-form binary toggle with Svelte 5 runes (no headless dependency — keyboard, tri-state, and group context are hand-rolled). Supports indeterminate state for tri-state lists, sizes, colors, label/hint/error plumbing, and proper keyboard / screen-reader behavior. CheckboxGroup renders option arrays or manages slotted checkboxes with bind:value.

color-pickerui

Hex color input with a native color trigger, an editable hex field, and a preset swatch grid. Two-way bindable value with an onValueChange callback; presets are overridable or hideable.

file-uploadui

Drag-and-drop file dropzone with click-to-browse fallback, file-type filtering, multi-file support, and per-file progress + remove controls. Wraps native `<input type="file">` with proper a11y.

Change language