Label

PreviewCode

LightStackBlitz ↗StackBlitz ↗StackBlitz ↗

Index nameTicker *Description (optional)

Allow keeper

Index name Ticker * Description (optional)

Allow keeper

Index name Ticker * Description (optional)

Allow keeper

Installation

CLIManual

npmpnpmyarnbun

npx shadcn@latest add @edmi-ui/label

pnpm dlx shadcn@latest add @edmi-ui/label

yarn dlx shadcn@latest add @edmi-ui/label

bunx shadcn@latest add @edmi-ui/label

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

CLIManual

npmpnpmyarnbun

npx shadcn-vue@latest add @edmi-ui/label

pnpm dlx shadcn-vue@latest add @edmi-ui/label

yarn dlx shadcn-vue@latest add @edmi-ui/label

bunx shadcn-vue@latest add @edmi-ui/label

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

CLIManual

npmpnpmyarnbun

npx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/label.json

pnpm dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/label.json

yarn dlx shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/label.json

bunx --bun shadcn-svelte@latest add https://viandwi24.github.io/edmi-ui/r/svelte/label.json

Pick your package manager above; the choice is remembered. Add the @edmi-ui registry first, see Getting started.

Usage

import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";

<div className="flex flex-wrap items-center gap-8">
  <Label>Index name</Label>
  <Label>
    Ticker <span className="text-destructive-text">*</span>
  </Label>
  <Label className="items-baseline">
    Description{" "}
    <span className="font-normal text-muted-foreground">(optional)</span>
  </Label>
  <div className="flex items-center gap-2">
    <Checkbox id="keeper" defaultChecked />
    <Label htmlFor="keeper">Allow keeper</Label>
  </div>
</div>

<script setup lang="ts">
import { Checkbox } from "@/components/ui/checkbox";
import { Label } from "@/components/ui/label";
</script>

<template>
  <div class="flex flex-wrap items-center gap-8">
    <Label>Index name</Label>
    <Label>
      Ticker <span class="text-destructive-text">*</span>
    </Label>
    <Label class="items-baseline">
      Description
      <span class="font-normal text-muted-foreground">(optional)</span>
    </Label>
    <div class="flex items-center gap-2">
      <Checkbox id="keeper" default-value="true" />
      <Label for="keeper">Allow keeper</Label>
    </div>
  </div>
</template>

<script lang="ts">
  import { Checkbox } from "$lib/components/ui/checkbox";
  import { Label } from "$lib/components/ui/label";
</script>

<div class="flex flex-wrap items-center gap-8">
  <Label>Index name</Label>
  <Label>Ticker <span class="text-destructive-text">*</span></Label>
  <Label class="items-baseline">
    Description
    <span class="font-normal text-muted-foreground">(optional)</span>
  </Label>
  <div class="flex items-center gap-2">
    <Checkbox id="keeper" checked />
    <Label for="keeper">Allow keeper</Label>
  </div>
</div>

Component source

registry/ui/label.tsx

"use client";

import { cn } from "cn";
import type * as React from "react";

function Label({ className, ...props }: React.ComponentProps<"label">) {
  return (
    // biome-ignore lint/a11y/noLabelWithoutControl: the control is supplied by the consumer (htmlFor or nesting)
    <label
      data-slot="label"
      className={cn(
        "flex items-center gap-2 text-sm leading-none font-medium text-foreground 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,
      )}
      {...props}
    />
  );
}

export { Label };

registry/ui/label/Label.vue

<script setup lang="ts">
import type { LabelProps } from 'reka-ui'
import type { HTMLAttributes } from 'vue'
import { reactiveOmit } from '@vueuse/core'
import { Label } from 'reka-ui'
import { cn } from '@/registry/edmi/lib/utils'

const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>()

const delegatedProps = reactiveOmit(props, 'class')
</script>

<template>
  <Label
    data-slot="label"
    v-bind="delegatedProps"
    :class="
      cn(
        'flex items-center gap-2 text-sm leading-none font-medium text-foreground select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
        props.class,
      )
    "
  >
    <slot />
  </Label>
</template>

registry/ui/label/index.ts

export { default as Label } from "./Label.vue";

Expand

src/lib/registry/ui/label/label.svelte

<script lang="ts">
  import { Label as LabelPrimitive } from "bits-ui";
  import { cn } from "$lib/utils.js";

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

<LabelPrimitive.Root
  bind:ref
  data-slot="label"
  class={cn(
    "flex items-center gap-2 text-sm leading-none font-medium text-foreground 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}
/>

src/lib/registry/ui/label/index.ts

import Root from "./label.svelte";

export {
  Root,
  //
  Root as Label,
};

Expand

API

Prop	Type	Default
htmlFor	string	none

✦ Edmi additions

• Foreground ink with weight 500; dims when its peer or Field is disabled.