Working with Elements

Aire’s core element APIs are auto-generated from the Atom Autocomplete package, which in turn sources data from MDN and Adobe Brackets. This means that all web standards-compliant HTML attributes are built-in with named methods.

Nearly all Aire attribute methods are fluent—they return the element instance to allow for chaining. For example:

{{ Aire::input()->label('Demo Input')->id('demo') }}

Element Class Names

If you're using Tailwind, you're going to want an easy way to adjust the class names applied to a given form element. Aire makes this easy, with addClass() and removeClass(). These are usually all you need to apply small adjustments on a case-by-case basis.

Value

Most form elements can have a value. This value will automatically get set via data binding or using the old form input if there was an error. If you want to explicitly override the value, use the value($value) method. If, instead, you just want to set a value to use if no bound/old value is available, use the defaultValue($value) method (or defaultChecked() for checkboxes).

Data Attributes

If you need to add special data- attributes to your elements, use the data($key, $value) method. If you pass NULL as the value, the data attribute will be unset. If you pass an array or an object that implements on of: Jsonable, JsonSerializable, or Arrayable, that value will automatically be JSON-encoded for you (useful for passing data to javascript).

Arbitrary Attributes

If you want to set your own arbitrary attributes on an element (say, wire:click), you can use the setAttribute($key, $value) method, which will set whatever attribute you choose regardless of whether it's valid HTML.

Global Attributes

There are some attributes that are global to all HTML elements. Each of these are documented in Galahad\Aire\DTD\Concerns\HasGlobalAttributes. These are:

Element::accessKey($value)

Set the accesskey attribute. Provides a hint for generating a keyboard shortcut for the current element.

Element::contentEditable(bool $content_editable = true)

Set the contenteditable boolean attribute. An enumerated attribute indicating if the element should be editable by the user.

Element::contextMenu($value)

Set the contextmenu attribute. The id of a menu to use as the contextual menu for this element.

Element::dir($value)

Set the dir attribute. An enumerated attribute indicates the directionality of the element's text.

Possible values:

• ltr
• rtl

Element::draggable($value)

Set the draggable attribute. An enumerated attribute that indicates whether the element can be dragged, using the HTML Drag and Drop API.

Possible values:

• auto
• false
• true

Element::dropZone($value)

Set the dropzone attribute. An enumerated attribute indicating what types of content can be dropped on an element, using the Drag and Drop API.

Possible values:

• copy
• move
• link

Element::hidden(bool $hidden = true)

Set the hidden flag. A Boolean attribute indicating that the element is not yet, or is no longer, relevant.

Element::id($value)

Set the id attribute. Defines a unique identifier (ID) which must be unique in the whole document.

Element::lang($value)

Set the lang attribute. Participates in defining the language of the element, the language that its non-editable elements are written in or the language that the editable elements should be written in.

Possible values:

• ab
• aa
• af
• sq
• am
• ar
• an
• hy
• as
• ay
• az
• ba
• eu
• bn
• dz
• bh
• bi
• br
• bg
• my
• be
• km
• ca
• zh
• co
• hr
• cs
• da
• nl
• en
• eo
• et
• fo
• fa
• fi
• fr
• fy
• gl
• gd
• gv
• ka
• de
• el
• kl
• gn
• gu
• ht
• ha
• he
• hi
• hu
• is
• io
• id
• ia
• ie
• iu
• ik
• ga
• it
• ja
• jv
• kn
• ks
• kk
• rw
• ky
• rn
• ko
• ku
• lo
• la
• lv
• li
• ln
• lt
• mk
• mg
• ms
• ml
• mt
• mi
• mr
• mo
• mn
• na
• ne
• no
• oc
• or
• om
• ps
• pl
• pt
• pa
• qu
• rm
• ro
• ru
• sz
• sm
• sg
• sa
• sr
• sh
• st
• tn
• sn
• ii
• sd
• si
• ss
• sk
• sl
• so
• es
• su
• sw
• sv
• tl
• tg
• ta
• tt
• te
• th
• bo
• ti
• to
• ts
• tr
• tk
• tw
• ug
• uk
• ur
• uz
• vi
• vo
• wa
• cy
• wo
• xh
• yi
• yo
• zu

Element::role($value)

Set the role attribute.

Possible values:

• alert
• alertdialog
• article
• application
• banner
• button
• checkbox
• columnheader
• combobox
• complementary
• contentinfo
• definition
• directory
• dialog
• document
• form
• grid
• gridcell
• group
• heading
• img
• link
• list
• listbox
• listitem
• log
• main
• marquee
• math
• menu
• menubar
• menuitem
• menuitemcheckbox
• menuitemradio
• navigation
• note
• option
• presentation
• progressbar
• radio
• radiogroup
• region
• row
• rowgroup
• rowheader
• scrollbar
• search
• separator
• slider
• spinbutton
• status
• tab
• tablist
• tabpanel
• textbox
• timer
• toolbar
• tooltip
• tree
• treegrid
• treeitem

Element::spellCheck(bool $spell_check = true)

Set the spellcheck boolean attribute. An enumerated attribute defines whether the element may be checked for spelling errors.

Element::style($value)

Set the style attribute. Contains CSS styling declarations to be applied to the element.

Element::tabIndex($value)

Set the tabindex attribute. Indicates if its element can be focused, and if/where it participates in sequential keyboard navigation (usually with the Tab key, hence the name).

Element::title($value)

Set the title attribute. Contains text representing advisory information, related to the element it belongs to.

Element::ariaActiveDescendant($value)

Set the aria-activedescendant attribute.

Element::ariaAtomic(bool $aria_atomic = true)

Set the aria-atomic boolean attribute.

Possible values:

• true
• false

Element::ariaBusy(bool $aria_busy = true)

Set the aria-busy boolean attribute.

Element::ariaControls($value)

Set the aria-controls attribute.

Element::ariaDescribedBy($value)

Set the aria-describedby attribute.

Element::ariaDisabled($value)

Set the aria-disabled attribute.

Possible values:

• true
• false

Element::ariaDropEffect($value)

Set the aria-dropeffect attribute.

Possible values:

• copy
• move
• link
• execute
• popup
• none

Element::ariaFlowTo($value)

Set the aria-flowto attribute.

Element::ariaGrabbed($value)

Set the aria-grabbed attribute.

Possible values:

• true
• false
• undefined

Element::ariaHasPopup(bool $aria_has_popup = true)

Set the aria-haspopup boolean attribute.

Possible values:

• true
• false

Element::ariaHidden(bool $aria_hidden = true)

Set the aria-hidden boolean attribute.

Possible values:

• true
• false

Element::ariaInvalid($value)

Set the aria-invalid attribute.

Possible values:

• grammar
• false
• spelling
• true

Element::ariaLabel($value)

Set the aria-label attribute.

Element::ariaLabelledBy($value)

Set the aria-labelledby attribute.

Element::ariaLive($value)

Set the aria-live attribute.

Possible values:

• off
• polite
• assertive

Element::ariaOwns($value)

Set the aria-owns attribute.

Element::ariaRelevant($value)

Set the aria-relevant attribute.

Possible values:

• additions
• removals
• text
• all
• additions text

Element Attributes

Many elements have their own set of attributes. These include:

<button>

Button::autoFocus(bool $auto_focus = true)

Set the autofocus flag.

Button::disabled(bool $disabled = true)

Set the disabled flag.

Button::form($value)

Set the form attribute.

Button::formAction($value)

Set the formaction attribute.

Button::formEncType($value)

Set the formenctype attribute.

Possible values:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

Button::formMethod($value)

Set the formmethod attribute.

Possible values:

• get
• post

Button::formNoValidate(bool $form_no_validate = true)

Set the formnovalidate flag.

Button::formTarget($value)

Set the formtarget attribute.

Possible values:

• _blank
• _parent
• _self
• _top

Button::name($value)

Set the name attribute.

Button::type($value)

Set the type attribute.

Possible values:

• button
• reset
• submit

Button::value($value)

Set the value attribute.

<fieldset>

Fieldset::disabled(bool $disabled = true)

Set the disabled flag.

Fieldset::form($value)

Set the form attribute.

Fieldset::name($value)

Set the name attribute.

<form>

Form::acceptCharset($value)

Set the accept-charset attribute.

Form::action($value)

Set the action attribute.

Form::autoComplete($value)

Set the autocomplete attribute.

Possible values:

• additional-name
• address-level1
• address-level2
• address-level3
• address-level4
• address-line1
• address-line2
• address-line3
• bday
• bday-year
• bday-day
• bday-month
• billing
• cc-additional-name
• cc-csc
• cc-exp
• cc-exp-month
• cc-exp-year
• cc-family-name
• cc-given-name
• cc-name
• cc-number
• cc-type
• country
• country-name
• current-password
• email
• family-name
• fax
• given-name
• home
• honorific-prefix
• honorific-suffix
• impp
• language
• mobile
• name
• new-password
• nickname
• off
• on
• organization
• organization-title
• pager
• photo
• postal-code
• sex
• shipping
• street-address
• tel-area-code
• tel
• tel-country-code
• tel-extension
• tel-local
• tel-local-prefix
• tel-local-suffix
• tel-national
• transaction-amount
• transaction-currency
• url
• username
• work

Form::encType($value)

Set the enctype attribute.

Possible values:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

Form::method($value)

Set the method attribute.

Possible values:

• get
• post

Form::name($value)

Set the name attribute.

Form::noValidate(bool $no_validate = true)

Set the novalidate flag.

Form::target($value)

Set the target attribute.

Possible values:

• _blank
• _parent
• _self
• _top

<input>

Input::accept($value)

Set the accept attribute.

Possible values:

• text/html
• text/plain
• application/msword
• application/msexcel
• application/postscript
• application/x-zip-compressed
• application/pdf
• application/rtf
• video/x-msvideo
• video/quicktime
• video/x-mpeg2
• audio/x-pn/realaudio
• audio/x-mpeg
• audio/x-waw
• audio/x-aiff
• audio/basic
• image/tiff
• image/jpeg
• image/gif
• image/x-png
• image/x-photo-cd
• image/x-MS-bmp
• image/x-rgb
• image/x-portable-pixmap
• image/x-portable-greymap
• image/x-portablebitmap

Input::alt($value)

Set the alt attribute.

Input::autoComplete($value)

Set the autocomplete attribute.

Possible values:

• additional-name
• address-level1
• address-level2
• address-level3
• address-level4
• address-line1
• address-line2
• address-line3
• bday
• bday-year
• bday-day
• bday-month
• billing
• cc-additional-name
• cc-csc
• cc-exp
• cc-exp-month
• cc-exp-year
• cc-family-name
• cc-given-name
• cc-name
• cc-number
• cc-type
• country
• country-name
• current-password
• email
• family-name
• fax
• given-name
• home
• honorific-prefix
• honorific-suffix
• impp
• language
• mobile
• name
• new-password
• nickname
• off
• on
• organization
• organization-title
• pager
• photo
• postal-code
• sex
• shipping
• street-address
• tel-area-code
• tel
• tel-country-code
• tel-extension
• tel-local
• tel-local-prefix
• tel-local-suffix
• tel-national
• transaction-amount
• transaction-currency
• url
• username
• work

Input::autoFocus(bool $auto_focus = true)

Set the autofocus flag.

Input::checked(bool $checked = true)

Set the checked flag.

Input::dirName($value)

Set the dirname attribute.

Input::disabled(bool $disabled = true)

Set the disabled flag.

Input::form($value)

Set the form attribute.

Input::formAction($value)

Set the formaction attribute.

Input::formEncType($value)

Set the formenctype attribute.

Possible values:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

Input::formMethod($value)

Set the formmethod attribute.

Possible values:

• get
• post

Input::formNoValidate(bool $form_no_validate = true)

Set the formnovalidate flag.

Input::formTarget($value)

Set the formtarget attribute.

Possible values:

• _blank
• _parent
• _self
• _top

Input::height($value)

Set the height attribute.

Input::list($value)

Set the list attribute.

Input::max($value)

Set the max attribute.

Input::maxLength($value)

Set the maxlength attribute.

Input::min($value)

Set the min attribute.

Input::multiple(bool $multiple = true)

Set the multiple flag.

Input::name($value)

Set the name attribute.

Input::pattern($value)

Set the pattern attribute.

Input::placeholder($value)

Set the placeholder attribute.

Input::readOnly(bool $read_only = true)

Set the readonly flag.

Input::required(bool $required = true)

Set the required flag.

Input::size($value)

Set the size attribute.

Input::src($value)

Set the src attribute.

Input::step($value)

Set the step attribute.

Input::type($value)

Set the type attribute.

Possible values:

• button
• checkbox
• color
• date
• datetime
• datetime-local
• email
• file
• hidden
• image
• month
• number
• password
• radio
• range
• reset
• search
• submit
• tel
• text
• time
• url
• week

Input::value($value)

Set the value attribute.

Input::width($value)

Set the width attribute.

<label>

Label::for($value)

Set the for attribute.

Label::form($value)

Set the form attribute.

<legend>

<option>

Option::disabled(bool $disabled = true)

Set the disabled flag.

Option::label($value)

Set the label attribute.

Option::selected(bool $selected = true)

Set the selected flag.

Option::value($value)

Set the value attribute.

<select>

Select::autoFocus(bool $auto_focus = true)

Set the autofocus flag.

Select::disabled(bool $disabled = true)

Set the disabled flag.

Select::form($value)

Set the form attribute.

Select::multiple(bool $multiple = true)

Set the multiple flag.

Select::name($value)

Set the name attribute.

Select::required(bool $required = true)

Set the required flag.

Select::size($value)

Set the size attribute.

<textarea>

Textarea::autoFocus(bool $auto_focus = true)

Set the autofocus flag.

Textarea::cols($value)

Set the cols attribute.

Textarea::dirName($value)

Set the dirname attribute.

Textarea::disabled(bool $disabled = true)

Set the disabled flag.

Textarea::form($value)

Set the form attribute.

Textarea::label($value)

Set the label attribute.

Textarea::maxLength($value)

Set the maxlength attribute.

Textarea::name($value)

Set the name attribute.

Textarea::placeholder($value)

Set the placeholder attribute.

Textarea::readOnly(bool $read_only = true)

Set the readonly flag.

Textarea::required(bool $required = true)

Set the required flag.

Textarea::rows($value)

Set the rows attribute.

Textarea::wrap($value)

Set the wrap attribute.

Possible values:

• hard
• soft