Label

The <Label> component is an accessible label for various form inputs. It uses the htmlFor attribute to associate the label with an input by its id and can be customized via the className prop.

Example

Preview

'An example labelExample Label

Code

'use client';

import React from 'react';
import { Label } from '@hv/ui/label';
import { Input } from '@hv/ui/input';

export default function LabelExample() {
  return (
    <div className='flex max-w-96 flex-col gap-3 py-5'>
      <Label htmlFor='example-label'>
        <span className='sr-only'>'An example label</span>
        Example Label
      </Label>
      <Input id='example-label' type='text' placeholder='example input' />
    </div>
  );
}

Props

Name	Description	Type
className	Additional classes for styling the label	String
children	Content to be rendered inside the label element	React.ReactNode
ref	Forwarded reference to the label element	React.Ref<HTMLLabelElement>
...props	Additional label properties from HTML attributes	HTMLLabelAttributes

Customization

The approach for customization will vary depending on if the customization is intended to be global for all consumers of the UI component or if it is only an override for a particular instance.

• If the customization is necessary for all use cases, update the component source code in the UI library package directly.
• Otherwise, pass className overrides to modify styles for a particular instance.