Label

import { Label } from '@raystack/apsara';

function FormField() {
  return (
    <div>
      <Label htmlFor="email">Email address</Label>
      <input id="email" type="email" />
    </div>
  );
}

import { Label } from '@raystack/apsara';

function RequiredField() {
  return (
    <div>
      <Label htmlFor="username" required>
        Username
      </Label>
      <input id="username" type="text" required />
    </div>
  );
}

import { Label } from '@raystack/apsara';

function CustomIndicator() {
  return (
    <div>
      <Label 
        htmlFor="password" 
        required 
        requiredIndicator=" (required)"
      >
        Password
      </Label>
      <input id="password" type="password" required />
    </div>
  );
}

import { Label } from '@raystack/apsara';

function LabelSizes() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      <div>
        <Label htmlFor="small-input" size="small">
          Small Label
        </Label>
        <input id="small-input" type="text" />
      </div>
      
      <div>
        <Label htmlFor="medium-input" size="medium">
          Medium Label
        </Label>
        <input id="medium-input" type="text" />
      </div>
      
      <div>
        <Label htmlFor="large-input" size="large">
          Large Label
        </Label>
        <input id="large-input" type="text" />
      </div>
    </div>
  );
}

import { Label } from '@raystack/apsara';

function CompleteField() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
      <Label htmlFor="full-name" required>
        Full name
      </Label>
      <input 
        id="full-name" 
        type="text" 
        placeholder="Enter your full name"
        required 
      />
      <span style={{ fontSize: '12px', color: 'gray' }}>
        This will be displayed on your profile
      </span>
    </div>
  );
}

import { Label } from '@raystack/apsara';

function CheckboxField() {
  return (
    <div style={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
      <input id="terms" type="checkbox" />
      <Label htmlFor="terms" size="medium">
        I agree to the terms and conditions
      </Label>
    </div>
  );
}

import { Label } from '@raystack/apsara';

function RadioGroup() {
  return (
    <fieldset>
      <legend>Select a plan</legend>
      
      <div style={{ display: 'flex', gap: '4px' }}>
        <input id="plan-free" type="radio" name="plan" value="free" />
        <Label htmlFor="plan-free">Free</Label>
      </div>
      
      <div style={{ display: 'flex', gap: '4px' }}>
        <input id="plan-pro" type="radio" name="plan" value="pro" />
        <Label htmlFor="plan-pro">Pro</Label>
      </div>
      
      <div style={{ display: 'flex', gap: '4px' }}>
        <input id="plan-enterprise" type="radio" name="plan" value="enterprise" />
        <Label htmlFor="plan-enterprise">Enterprise</Label>
      </div>
    </fieldset>
  );
}