Label

Docs

Label

Displays an accessible label for an input field.

Installation

Copy and paste the following code into your component.

import React from "react";
import styles from "./label.module.css";

type LabelProps = React.HTMLProps<HTMLLabelElement> & {
  className?: string;
};

const Label: React.FC<LabelProps> = ({ className, ...props }) => {
  return <label className={`${styles.base} ${className ?? ""}`} {...props} />;
};

Label.displayName = "Label";

export { Label };

Copy and paste the following CSS into a .module.css file.

.base {
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: hsl(var(--foregroun));
}

Update the import paths to match your project setup.

Usage

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

<Label htmlFor='email'>Email</Label>

Input Select