104Get started
HextaUI

Label: Follows its control

The label dims and shows a not-allowed cursor while its control is disabled, and exposes data-required, data-invalid and data-readonly for your own styles. It keeps up when the control changes.

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export function LabelStates() {
  const [locked, setLocked] = React.useState(true)

  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <div className="flex flex-col gap-2">
        <Label htmlFor="label-states-domain">Custom domain</Label>
        <Input
          id="label-states-domain"
          defaultValue="docs.example.com"
          disabled={locked}
        />
      </div>
      <Button
        variant="outline"
        size="sm"
        className="self-start"
        onClick={() => setLocked(!locked)}
      >
        {locked ? "Unlock" : "Lock"}
      </Button>
    </div>
  )
}

Add this example

This adds the example as components/examples/label/states.tsx, together with the Label component and the HextaUI theme tokens it needs.

pnpm dlx shadcn@latest add https://hextaui.com/r/label-states.json

To add only the component, follow the Label installation.

Props in this example

The Label props this example sets, from the API reference.

Label

PropTypeDefault
htmlForThe id of the control. Leave it out when the label wraps the control.
string–

Every prop is in the Label API reference.

More Label examples

See them all, with keyboard support and accessibility notes, on the Label page.

Related components