Label

The Label component is used to create labels for form elements. It provides a way to associate a label with its corresponding input element.

Props

Name	Type	Description
label	`string` \| `ReactElement`	The label to be displayed for the form element. You can use a string or a React element for the label.
children	`ReactElement`	The form element for which the label is associated.
...restProps	Various HTML label attributes and event handlers.	Additional attributes and event handlers passed down to the underlying label element.

Try It

Open Sandbox

import { Label, Input } from '@kloktun/uikit'

export default function LabelExample() {
  return (
    <div className="flex flex-col gap-4">
      <Label label="Username">
        <Input placeholder="Enter your username" />
      </Label>
      <Label label={<span style={{ color: 'red' }}>Password</span>}>
        <Input type="password" placeholder="Enter your password" />
      </Label>
    </div>
  );
}

Slider Helper