Get Started

Components

accordion alert avatar breadcrumb button checkbox dropdown input label modal pagination radio select sheet skeleton switch table textarea toast

Label

컨트롤과 연관된 접근 가능한 레이블을 렌더링합니다.

code

Expend code


  <div>
      <div className="flex items-center space-x-2">
          <input id="terms" className="peer" type="checkbox" />
          <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
  </div>


  <div>
      <div className="flex items-center space-x-2">
          <input id="terms" className="peer" type="checkbox" />
          <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
  </div>

#Disabled

code

Expend code


  <div>
      <div className="flex items-center space-x-2">
          <input id="terms" className="peer" type="checkbox" disabled />
          <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
  </div>


  <div>
      <div className="flex items-center space-x-2">
          <input id="terms" className="peer" type="checkbox" disabled />
          <Label htmlFor="terms">Accept terms and conditions</Label>
      </div>
  </div>

#With Input

code

Expend code


  <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
  </div>


  <div className="grid w-full max-w-sm items-center gap-1.5">
      <Label htmlFor="email">Email</Label>
      <Input type="email" id="email" placeholder="Email" />
  </div>

Label

Renders an accessible label associated with controls.

Prop	Type	Default	Description
htmlFor	string	-	The id of the element the label is associated with.