Aria

Aria is a customizable input component with various accessibility and styling options.

Basic

The Aria component is used for collecting user input. It supports various customization options for accessibility and styling.

Message

<Aria v-model="value"></Aria>

The basic usage of the Aria component involves binding a data property using the v-model directive. This directive automatically syncs the input value with the specified data property, allowing for two-way data binding.

Placeholder

The placeholder prop provides a hint for the expected input by displaying placeholder text within the input field.

<Aria 
    placeholder="Enter your text here" 
    v-model="value">
</Aria>

Autocomplete

The autocomplete prop controls the browser's autocomplete feature. It can be set to "on" or "off".

<Aria 
    autocomplete="on" 
    v-model="value">
</Aria>
<Aria 
    autocomplete="off" 
    v-model="value">
</Aria>

Wrap

The wrap prop specifies the text wrapping behavior for the input field. The available options are "soft", "hard", and "off".

<Aria 
    wrap="soft" 
    v-model="value">
</Aria>
<Aria 
    wrap="hard" 
    v-model="value">
</Aria>
<Aria 
    wrap="off" 
    v-model="value">
</Aria>

Rows

The rows prop specifies the number of visible rows for text input (applies to textarea elements).

<Aria 
    :rows="3" 
    v-model="value">
</Aria>
<Aria 
    :rows="5" 
    v-model="value">
</Aria>
<Aria 
    :rows="10" 
    v-model="value">
</Aria>

Max Length

The maxLength prop specifies the maximum allowed length of the input field's value.

<Aria 
    :maxLength="50" 
    v-model="value">
</Aria>
<Aria 
    :maxLength="100" 
    v-model="value">
</Aria>

Custom CSS Class

The classInput prop allows you to apply custom CSS classes to the input element, enabling you to style it according to your design requirements.

<Aria 
    classInput="custom-input-class" 
    v-model="value">
</Aria>