Aire Components

Aire::input('input', 'Sample Input')
  ->id('sample-input-field')
  ->required()
  ->type('text')
  ->placeholder('Placeholder text')
  ->value('Pre-filled with data')
  ->helpText('This is a regular input element');

Aire::input()->label('Large input')
  ->variant()->lg();

Aire::input()->label('Small Input')
  ->variant()->sm();

Aire::textArea('bio', 'About You')
  ->rows(3)
  ->cols(40);

Aire::date('date_input', 'Choose a Date')
  ->helpText('Browser-native date picker (ymmv)');

Aire::time('time', 'Time Input')
  ->helpText('Browser-native time input (minimal browser support)');

Aire::dateTimeLocal('dt', 'Pick a Date & Time')
  ->helpText('While Aire does support the "datetime" type as well, "datetime-local" is recommended for better localization support.');

Aire::month('m', 'Pick a Month')
  ->helpText('Browser-native month picker (minimal browser support)');

Aire::week('w', 'Pick a week')
  ->helpText('Browser-native week picker (minimal browser support)');

Aire::email('email', 'Enter Your Email')
  ->pattern('^.*@gmail\\.com$')
  ->helpText('Must be valid and end in gmail.com');

Aire::file('upload', 'Upload a File');

Aire::number('num', 'Enter a number divisible by 10')
  ->value(100)
  ->step(10);

Aire::password('password', 'Enter your password');

Aire::radioGroup([1 => 'One', 2 => 'Two', 3 => 'Three'], 'radio', 'Radio Group')
  ->value(2);

Aire::checkboxGroup([1 => 'One', 2 => 'Two', 3 => 'Three'], 'radio', 'Checkboxes')
  ->value([2, 3]);

Aire::checkbox('checkbox', 'Confirm that you agree');

Aire::checkbox('opt_out', 'Opt-out of annoying emails')
  ->defaultChecked();

Aire::select([1 => 'One', 2 => 'Two', 3 => 'Three'], 'select', 'Select')
  ->value(2);

Aire::select([1 => 'One', 2 => 'Two', 3 => 'Three'], 'select2', 'Multi-Select')
  ->multiple()
  ->value([2, 3]);

Aire::timezoneSelect()
  ->label('Choose Your Timezone');

Aire::range('range', 'Range')
  ->min(50)
  ->max(100)
  ->step(10)
  ->value(70);

Aire::search('q', 'Enter Your Query');

Aire::tel('phone', 'Enter Phone Number')
  ->helpText('Mostly used on mobile');

Aire::url('href', 'Enter a URL');

Aire::color('color', 'Pick a Color')
  ->addClass('w-16 h-16')
  ->removeClass('w-full')
  ->helpText('Pick a color with the browser-native picker');

Aire::submit('Standard Button');

Aire::submit('Gray Button')->variant()->gray()->addClass('my-1');
Aire::submit('Red Button')->variant()->red()->addClass('my-1');
Aire::submit('Orange Button')->variant()->orange()->addClass('my-1');
Aire::submit('Yellow Button')->variant()->yellow()->addClass('my-1');
Aire::submit('Green Button')->variant()->green()->addClass('my-1');
Aire::submit('Teal Button')->variant()->teal()->addClass('my-1');
Aire::submit('Blue Button')->variant()->blue()->addClass('my-1');
Aire::submit('Indigo Button')->variant()->indigo()->addClass('my-1');
Aire::submit('Purple Button')->variant()->purple()->addClass('my-1');
Aire::submit('Pink Button')->variant()->pink()->addClass('my-1');

echo '<hr class="my-6" />';

Aire::submit('Small Green Button')
  ->variants('sm', 'green');