Inputs & Form Controls

import { CPSLInput } from "@/components/cpsl/CPSLInput"

// Default
<CPSLInput label="Team Name" placeholder="e.g. Charlotte FC Academy" />

// With left icon
<CPSLInput
  label="Email"
  type="email"
  leftIcon={<MailIcon size={14} />}
  hint="We'll send your confirmation here"
/>

// Error state
<CPSLInput
  label="Email"
  type="email"
  error="Please enter a valid email address"
/>

// Disabled
<CPSLInput label="League Code" value="CPSL-2025" disabled />

import {
  Select, SelectContent, SelectItem,
  SelectTrigger, SelectValue,
} from "@/components/ui/select"

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Choose division..." />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="premier">Premier Division</SelectItem>
    <SelectItem value="elite">Elite Division</SelectItem>
    <SelectItem value="academy">Academy Division</SelectItem>
  </SelectContent>
</Select>

import { Checkbox } from "@/components/ui/checkbox"
import { Label } from "@/components/ui/label"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"
import { Switch } from "@/components/ui/switch"

// Checkbox
<div className="flex items-center gap-2">
  <Checkbox id="terms" />
  <Label htmlFor="terms">Accept terms & conditions</Label>
</div>

// Radio group
<RadioGroup defaultValue="premier">
  <div className="flex items-center gap-2">
    <RadioGroupItem value="premier" id="premier" />
    <Label htmlFor="premier">Premier Division</Label>
  </div>
  <div className="flex items-center gap-2">
    <RadioGroupItem value="elite" id="elite" />
    <Label htmlFor="elite">Elite Division</Label>
  </div>
</RadioGroup>

// Switch
<div className="flex items-center gap-2">
  <Switch id="notifications" />
  <Label htmlFor="notifications">Match alerts</Label>
</div>