// The `Input` component automatically adds the `validator` class because `required: true` is set.
const Input(
  type: 'email',
  placeholder: 'mail@site.com',
  required: true,
),
ValidatorHint([text('Enter valid email address')]),

Input(
  type: 'password',
  placeholder: 'Password',
  required: true,
  minLength: 8,
  pattern: r'(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,}',
  title: 'Must be more than 8 characters...',
),
ValidatorHint([
  text('Must be more than 8 characters, including'),
  br(),
  text('At least one number'),
  br(),
  text('At least one lowercase letter'),
  br(),
  text('At least one uppercase letter'),
]),

Input(
  type: 'text',
  placeholder: 'Username',
  required: true,
  pattern: r'[A-Za-z][A-Za-z0-9\-]*',
  minLength: 3,
  maxLength: 30,
  title: 'Only letters, numbers or dash',
),
ValidatorHint([
  text('Must be 3 to 30 characters'),
  br(),
  text('containing only letters, numbers or dash'),
]),

Input(
  type: 'tel',
  placeholder: 'Phone',
  required: true,
  pattern: r'[0-9]*',
  minLength: 10,
  maxLength: 10,
  title: 'Must be 10 digits',
  classes: 'tabular-nums',
),
ValidatorHint([text('Must be 10 digits')]),

Input(
  type: 'url',
  placeholder: 'https://',
  value: 'https://',
  required: true,
  pattern: r'^(https?://)?([a-zA-Z0-9]([a-zA-Z0-9\-].*[a-zA-Z0-9])?\.)+[a-zA-Z].*$',
  title: 'Must be valid URL',
),
ValidatorHint([text('Must be valid URL')]),

Input(
  type: 'date',
  placeholder: 'Pick a date in 2025',
  required: true,
  // The `min` and `max` properties on Input are for numbers.
  // For date strings, use the `attributes` map.
  attributes: {'min': '2025-01-01', 'max': '2025-12-31'},
  title: 'Must be in 2025',
),
ValidatorHint([text('Must be in 2025')]),

Input(
  type: 'number',
  placeholder: 'Type a number between 1 to 10',
  required: true,
  // For number inputs, the `min` and `max` properties can be used directly.
  min: 1,
  max: 10,
  title: 'Must be between 1 to 10',
),
ValidatorHint([text('Must be between 1 to 10')]),

// Checkbox doesn't automatically add the 'validator' class, so we add it manually.
// A stateful component is needed to manage the checked state.
class StatefulCheckboxValidator extends StatefulComponent {
  bool isChecked = false;

  @override
  Component build(BuildContext context) {
    return Checkbox(
      isChecked: isChecked,
      onToggle: (val) => setState(() => isChecked = val),
      classes: 'validator',
      attributes: {'required': '', 'title': 'Required'},
    );
  }
}

// In your main build:
form([
  StatefulCheckboxValidator(),
  ValidatorHint([text('Required')]),
])

// Like Checkbox, Toggle requires the 'validator' class to be added manually.
// A stateful component is needed to manage the checked state.
class StatefulToggleValidator extends StatefulComponent {
  bool isChecked = false;

  @override
  Component build(BuildContext context) {
    return Toggle(
      isChecked: isChecked,
      onToggle: (val) => setState(() => isChecked = val),
      classes: 'validator',
      attributes: {'required': '', 'title': 'Required'},
    );
  }
}

// In your main build:
form([
  StatefulToggleValidator(),
  ValidatorHint([text('Required')]),
])

form([
  Select(
    [
      option([text('Choose:')], disabled: true, selected: true, value: ''),
      option([text('Tabs')]),
      option([text('Spaces')]),
    ],
    // Add the 'validator' class manually to the Select component.
    classes: 'validator',
    attributes: {'required': ''},
  ),
  ValidatorHint([text('Required')]),
  Button([text('Submit form')], type: 'submit', style: [Spacing.mt4]),
])