Your Feedback

setFeedback(e.target.value)}
        isInvalid={isInvalid}
        rows={5}
        placeholder="Tell us what you think..."
      />
      {isInvalid && <ErrorMessage>Feedback must be under 500 characters</ErrorMessage>}
    </div>
  );
}
```

--------------------------------

### Checkbox and CheckboxGroup: Selection Components (React)

Source: https://context7.com/ubie-oss/ubie-ui/llms.txt

Components for handling single or multiple selections. CheckboxGroup provides label and layout support for multiple checkboxes, while Checkbox handles individual selection states, including an indeterminate state. These components are built with React and depend on the ubie-ui library.

```tsx
import { Checkbox, CheckboxGroup, Stack } from '@ubie/ubie-ui';
import { useState, useCallback } from 'react';

function PreferencesForm() {
  const [selected, setSelected] = useState<string[]>(['email']);
  const options = ['email', 'sms', 'push', 'none'];

return (
    <CheckboxGroup label="Notification Preferences" showRequiredLabel direction="column">
      {options.map((option) => (
        <Checkbox
          key={option}
          name="notifications"
          value={option}
          checked={selected.includes(option)}
          onChange={handleChange}
          size="medium" // or "small"
        >
          {option.charAt(0).toUpperCase() + option.slice(1)}
        </Checkbox>
      ))}
    </CheckboxGroup>
  );
}

// Single checkbox usage
function TermsCheckbox() {
  const [agreed, setAgreed] = useState(false);

return (
    <Checkbox
      name="terms"
      value="agree"
      checked={agreed}
      onChange={(e) => setAgreed(e.target.checked)}
    >
      I agree to the terms and conditions
    </Checkbox>
  );
}

// Indeterminate state for parent checkbox
<Checkbox name="selectAll" isIndeterminate>
  Select All (some selected)
</Checkbox>
```

--------------------------------

### RadioButton and RadioGroup: Single Selection Components (React)

Source: https://context7.com/ubie-oss/ubie-ui/llms.txt

Components for selecting a single option from a predefined list. RadioGroup manages the group of RadioButton components, providing labels and layout options (column or row). These are implemented using React and the ubie-ui library.

```tsx
import { RadioButton, RadioGroup } from '@ubie/ubie-ui';
import { useState } from 'react';

function GenderSelect() {
  const [gender, setGender] = useState('');

const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    setGender(e.target.value);
  };

return (
    <RadioGroup label="Gender" showRequiredLabel direction="column">
      <RadioButton
        name="gender"
        value="male"
        checked={gender === 'male'}
        onChange={handleChange}
        size="medium"
      >
        Male
      </RadioButton>
      <RadioButton
        name="gender"
        value="female"
        checked={gender === 'female'}
        onChange={handleChange}
      >
        Female
      </RadioButton>
      <RadioButton
        name="gender"
        value="other"
        checked={gender === 'other'}
        onChange={handleChange}
      >
        Other
      </RadioButton>
    </RadioGroup>
  );
}

// Horizontal layout
<RadioGroup label="Size" direction="row">
  <RadioButton name="size" value="s" checked={size === 's'} onChange={handleChange}>S</RadioButton>
  <RadioButton name="size" value="m" checked={size === 'm'} onChange={handleChange}>M</RadioButton>
  <RadioButton name="size" value="l" checked={size === 'l'} onChange={handleChange}>L</RadioButton>
</RadioGroup>
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.