CatalystUI LogoCatalyst UIDocumentationDocumentationAboutAbout
CTRL K
GitHubGitHub (opens in a new tab)
CTRL K
  • Introduction
  • Get Started
  • Components
  • Accordion
  • Alert
  • Aspect Ratio
  • Avatar
  • Buttons
  • Checkbox
  • Collapsible
  • Dialog
  • Dropdown
  • Hover Card
  • LabelNew
  • Navigation Menu
  • Popover
  • Progress
  • Radio Group
  • Scroll Area
  • Select
  • SeparatorNew
  • SliderNew
  • Switch
  • Tabs
  • Toast
  • ToggleNew
  • Toggle Group
  • Toolbar
  • Tooltip
  • Utils
  • Copy to Clipboard
  • More
  • About CatalystUI
    • Introduction
    • Get Started
    • Components
    • Accordion
    • Alert
    • Aspect Ratio
    • Avatar
    • Buttons
    • Checkbox
    • Collapsible
    • Dialog
    • Dropdown
    • Hover Card
    • LabelNew
    • Navigation Menu
    • Popover
    • Progress
    • Radio Group
    • Scroll Area
    • Select
    • SeparatorNew
    • SliderNew
    • Switch
    • Tabs
    • Toast
    • ToggleNew
    • Toggle Group
    • Toolbar
    • Tooltip
    • Utils
    • Copy to Clipboard
    • More
    • About CatalystUI
  • About

On This Page

  • Example
  • Props
Question? Give us feedback → (opens in a new tab)Edit this page
Documentation
Label

Label

Example

import { Label } from '@i4o/catalystui'
 
export default () => {
	return (
		<>
			<Label label='First Name' htmlFor='first-name' />
			<input className='h-10 rounded-md' id='first-name' />
		</>
	)
}

Props

NameTypeDefaultDescription
labelstring''Label Text
htmlForstring''ID of the associated element
Hover CardNavigation Menu