Aire Components

Generic Input

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

Aire::input()->label('Large input')

Aire::input()->label('Small Input')
This is a regular input element

Text Area

Aire::textArea('bio', 'About You')

Date Input

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

Time Input

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

Date & Time Input

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.');
While Aire does support the "datetime" type as well, "datetime-local" is recommended for better localization support.

Month Input

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

Week Input

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

Email Input

Aire::email('email', 'Enter Your Email')
  ->helpText('Must be valid and end in');
Must be valid and end in

File Input

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

Number Input

Aire::number('num', 'Enter a number divisible by 10')

Password Field

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

Radio Button Group

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

Checkbox Group

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


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


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

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

Timezone Select

  ->label('Choose Your Timezone');

Range Selector

Aire::range('range', 'Range')

Search Input

Phone Number Input

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

URL Input

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

Color Picker

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

Submit Button

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');