How to Add a Label to a React App

Before installing the Label, confirm your React project has the three things Drivn assumes: Tailwind CSS v4 installed and processing your styles, TypeScript configured (the component ships as a .tsx file), and a @/ path alias pointing at your source directory. If you scaffolded with create-next-app, npm create vite, or npx drivn@latest create, all three are already wired. For a custom setup, check the compilerOptions.paths entry in tsconfig.json; the installation page lists the minimal config. The Label pulls in no other Drivn components and imports no icons, so it is a single self-contained file — one of the simplest components to add first when you are trying Drivn in an existing app.

Run the CLI from your project root to add the Label source file. The command prompts once for your install directory (defaulting to src/components/ui/), writes label.tsx, and finishes — there are no dependencies to resolve, so nothing else is written to your project and nothing is added to package.json. No global config file is created; the result is one TypeScript file you edit like any other component. Confirm it landed in your editor, then commit it for a clean baseline. If your project uses a monorepo layout or a non-standard source path, the CLI docs cover the flags for targeting a custom location during install.

Import Label from your UI directory and pair it with an input in a flex flex-col gap-2 column so the label sits just above the field. The one attribute that does the accessibility work is htmlFor: set it to the input's id and the browser links the two, so a screen reader announces the label when the field is focused and a click on the label word focuses the input. The component wraps your text in a native <label> styled to text-sm font-medium text-foreground — a small, medium-weight caption that reads its color from your Tailwind tokens. Every native label attribute passes straight through {...props}, so id, aria-*, and data-* work exactly as they would on a raw element. Pair it with the Drivn Input for a matching field, and reach for React's useId hook when you render the pair inside a reusable component to avoid id collisions.

The same htmlFor/id pairing associates a label with any form control, not just a text input. For a Checkbox, place the label beside the control in a flex items-center gap-2 row rather than above it, point htmlFor at the checkbox id, and clicking the label toggles the box — the enlarged hit target matches native form behavior. For a Select, keep the stacked flex flex-col gap-2 layout and point htmlFor at the trigger's id. Because the Label carries no positional classes of its own — only its text-sm font-medium typography — the surrounding wrapper owns the layout in every arrangement, which is why the component ships one className and no variants. That composability lets the same Label sit above an input, beside a checkbox, or over a select without any change to the component itself.

A required-field marker is a red * rendered as a child of the label rather than a sibling, so the glyph stays attached to the label text and the click target still forwards focus to the input. Wrap it in a <span className="text-destructive" aria-hidden="true"> so the color reads from the destructive token and the screen reader skips the decorative character, and set aria-required="true" on the input so assistive technology announces the constraint through the explicit attribute. Restyling is just as direct: every class the label renders lives in one cn() call in the file you own — text-sm font-medium text-foreground. Edit that string and every label updates at once; pass a className like text-base or text-destructive for a one-off override, which merges through cn() so your override wins. Because the color is a Tailwind token, changing it in theming re-themes every label for dark and light mode. The Label source below is copied verbatim from label.ts.