<FormGroup>
  <FormLabel>Label</FormLabel>
  <Input placeholder="Enter text" />
  <FormHelp>Help text</FormHelp>
</FormGroup>

<!-- Sizes: xs, sm, (default), lg, xl -->
<Input size="xs" placeholder="Extra Small" />
<Input size="sm" placeholder="Small" />
<Input placeholder="Default" />
<Input size="lg" placeholder="Large" />
<Input size="xl" placeholder="Extra Large" />

<!-- Success state -->
<FormGroup state="success">
  <FormLabel>Valid Input</FormLabel>
  <Input value="Correct value" />
  <FormHelp>Looks good!</FormHelp>
</FormGroup>

<!-- Warning state -->
<FormGroup state="warning">
  <FormLabel>Warning</FormLabel>
  <Input value="Check this" />
  <FormHelp>Please review</FormHelp>
</FormGroup>

<!-- Error state -->
<FormGroup state="error">
  <FormLabel>Invalid</FormLabel>
  <Input value="Wrong value" />
  <FormHelp>This field is required</FormHelp>
</FormGroup>

Input Groups (Prepend/Append)

<!-- With prepend -->
<InputGroup>
  <InputGroupPrepend>@</InputGroupPrepend>
  <Input placeholder="username" />
</InputGroup>

<!-- With append -->
<InputGroup>
  <Input placeholder="0.00" />
  <InputGroupAppend>.00</InputGroupAppend>
</InputGroup>

<!-- With both + button -->
<InputGroup>
  <InputGroupPrepend>$</InputGroupPrepend>
  <Input placeholder="Amount" />
  <InputGroupAppend>.00</InputGroupAppend>
  <Button variant="primary" isInputGroupButton>Go</Button>
</InputGroup>

<!-- Toggle Mode Button (Filter / Search) + Go -->
<InputGroup>
  <Button variant="primary" isInputGroupButton onclick={toggleMode}>
    <i class={isSearch ? 'fa-solid fa-magnifying-glass' : 'fa-solid fa-filter'}></i>
  </Button>
  <Input placeholder={isSearch ? 'Search...' : 'Filter...'} />
  <Button variant="primary" isInputGroupButton>Go</Button>
</InputGroup>

<!-- Multiple prepends/appends -->
<InputGroup>
  <InputGroupPrepend>https://</InputGroupPrepend>
  <InputGroupPrepend>www.</InputGroupPrepend>
  <Input placeholder="example" />
  <InputGroupAppend>.com</InputGroupAppend>
</InputGroup>

<!-- Select dropdown -->
<Select>
  <option>Choose...</option>
  <option>Option 1</option>
  <option>Option 2</option>
</Select>

<!-- Multiple select (use native element) -->
<select class="pa-select" multiple>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<!-- Textarea -->
<Textarea placeholder="Enter message..." />
<Textarea rows={5} />

<!-- Checkbox group -->
<CheckboxGroup>
  <Checkbox labelText="Option 1" checked />
  <Checkbox labelText="Option 2" />
  <Checkbox labelText="Disabled" disabled />
</CheckboxGroup>

<!-- Radio group -->
<RadioGroup name="demo">
  <Radio labelText="Option A" checked />
  <Radio labelText="Option B" />
  <Radio labelText="Disabled" disabled />
</RadioGroup>

<!-- Sizes: xs, sm, (default), lg, xl -->
<Checkbox size="sm" labelText="Small" />
<Radio size="lg" labelText="Large" />

Text Inputs

• pa-input - Base input styling
• pa-input--xs - Extra small input
• pa-input--sm - Small input
• pa-input--lg - Large input
• pa-input--xl - Extra large input

Select Dropdowns

• pa-select - Base select styling
• pa-select--xs - Extra small select
• pa-select--sm - Small select
• pa-select--lg - Large select
• pa-select--xl - Extra large select

Textareas

• pa-textarea - Base textarea styling
• pa-textarea--xs - Extra small textarea
• pa-textarea--sm - Small textarea
• pa-textarea--lg - Large textarea
• pa-textarea--xl - Extra large textarea

Input Groups

• pa-input-group - Container for input with addons
• pa-input-group__prepend - Addon before input
• pa-input-group__append - Addon after input
• pa-input-group__button - Button addon
• pa-input-group--xs - Extra small input group
• pa-input-group--sm - Small input group
• pa-input-group--lg - Large input group
• pa-input-group--xl - Extra large input group

Form Layout

• pa-form - Form container with label styling
• pa-form-group - Form field container with spacing
• pa-form-group--horizontal - Horizontal label/input layout
• pa-form-actions - Container for form buttons

Validation States (on form-group)

• pa-form-group--success - Success state (green border)
• pa-form-group--warning - Warning state (yellow border)
• pa-form-group--error - Error state (red border)

Validation States (on input)

• pa-input--success, pa-select--success, pa-textarea--success - Success state
• pa-input--warning, pa-select--warning, pa-textarea--warning - Warning state
• pa-input--error, pa-select--error, pa-textarea--error - Error state

Theme Color Variants (on input)

• pa-input--color-1 through pa-input--color-9 - Theme color slots
• pa-select--color-1 through pa-select--color-9 - Theme color slots
• pa-textarea--color-1 through pa-textarea--color-9 - Theme color slots

Help Text

• pa-form-help - Help text below input
• pa-form-help--success - Success colored help text
• pa-form-help--warning - Warning colored help text
• pa-form-help--error - Error colored help text
• pa-form-help--color-1 through pa-form-help--color-9 - Theme color slots

Checkboxes

• pa-checkbox-group - Container for multiple checkboxes
• pa-checkbox - Checkbox wrapper (label element)
• pa-checkbox__box - Custom checkbox visual
• pa-checkbox__label - Checkbox label text
• pa-checkbox--xs - Extra small checkbox
• pa-checkbox--sm - Small checkbox
• pa-checkbox--lg - Large checkbox
• pa-checkbox--xl - Extra large checkbox
• pa-checkbox--x - X mark instead of checkmark
• pa-checkbox--disabled - Disabled state

Radio Buttons

• pa-radio-group - Container for multiple radios
• pa-radio - Radio button wrapper (label element)
• pa-radio__label - Radio label text
• pa-radio--xs - Extra small radio
• pa-radio--sm - Small radio
• pa-radio--lg - Large radio
• pa-radio--xl - Extra large radio