Label

Component

Preview

Preview solid

Usage

import { Label } from "@/components/ui/label"

export function LabelDemo() {
return (
  <div class="flex flex-col gap-2 max-w-sm">
    <Label for="email">Email</Label>
    <input
      id="email"
      type="email"
      placeholder="Enter your email"
      class="flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm"
    />
  </div>
)
}

Installation

CLI

npm

npx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/label.json

pnpm

pnpm dlx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/label.json

bun

bunx shadcn@latest add https://devx-op.github.io/arkitect-ui/r/s/label.json

Manual

components/ui/label.tsx

import { cn } from "@/lib/utils"
import { type ComponentProps, splitProps } from "solid-js"

function Label(props: ComponentProps<"label">) {
  const [local, rest] = splitProps(props, ["class"])

  return (
    <label
      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",
        local.class,
      )}
      {...rest}
    />
  )
}

export { Label }