AZURA

 Pre-alpha
Github

Main Menu

  • Get Started
  • Breakpoints
  • Changelog

  • Framework Style

    • Grid
    • Flex
    • Colors
    • Typography
    • Round
    • Elevation
    • Backdrop
    • Buttons
    • Icons
    • Images
    • Cards
    • Form inputs and control
    • Text fields
    • Content panels
    • Carousel
    • Validation Form
    • Dialogs
    • Input controls
    • Lists
    • Textareas
    • Forms
    • File Inputs
    • Ajax
    • Viewport
    • Select
    • Scrollbar

Text Fields

Text fields components are used for collecting user provided information.

Regular

<div class="text-field">
	<div class="input-slot">
		<input type="text" name="regular-empty">
		<label>Regular Empty</label>
	</div>
</div>

<div class="text-field">
	<div class="input-slot">
		<input type="text" name="regular-value" value="This field has value">
		<label>Regular with Value</label>
	</div>
</div>

<div class="text-field">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="regular-placeholder">
		<label>Regular with Placeholder</label>
	</div>
</div>
0
<div class="text-field">
	<div class="input-slot">
		<input type="text" name="regular-counter">
		<label>Regular with Character Counter</label>
	</div>
	<div class="details">
		<div class="message"></div>
		<div class="counter">0</div>
	</div>
</div>
Max 20 characters
<div class="text-field">
	<div class="input-slot">
		<input type="text" maxlength="20" name="regular-max-length">
		<label>Regular Max Length</label>
	</div>
	<div class="details">
		<div class="message">Max 20 characters</div>
		<div class="counter"></div>
	</div>
</div>
This field counts word instead of characters
0
<div class="text-field word-counter">
	<div class="input-slot">
		<input type="text" name="regular-counter">
		<label>Regular with Word Counter</label>
	</div>
	<div class="details">
		<div class="message">This field counts word instead of characters</div>
		<div class="counter">0</div>
	</div>
</div>

<div class="text-field field-error">
	<div class="input-slot">
		<input type="text" name="regular-placeholder" required>
		<label>Regular with Error</label>
	</div>
</div>

<div class="text-field">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="regular-placeholder" value="This is the value" readonly>
		<label>Read Only</label>
	</div>
</div>

<div class="text-field disabled">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="regular-placeholder" disabled>
		<label>Regular Disabled</label>
	</div>
</div>
This field is required
0
<div class="text-field field-error">
	<div class="input-slot">
		<input type="text" name="regular-placeholder" required>
		<label>Regular with Error</label>
	</div>
	<div class="details">
		<div class="message">This field is required</div>
		<div class="counter">0</div>
	</div>
</div>
You cannot change this field
0
<div class="text-field persistent-message">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="regular-placeholder" value="This is the value" readonly>
		<label>Read Only</label>
	</div>
	<div class="details">
		<div class="message">You cannot change this field</div>
		<div class="counter">0</div>
	</div>
</div>
This field is disabled
0
<div class="text-field persistent-message disabled">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="regular-placeholder" value="This is the value" disabled>
		<label>Regular Disabled</label>
	</div>
	<div class="details">
		<div class="message">This field is disabled</div>
		<div class="counter">0</div>
	</div>
</div>

Boxed

<div class="text-field boxed">
	<div class="input-slot">
		<input type="text" name="boxed-empty">
		<label>Boxed Empty</label>
	</div>
</div>

<div class="text-field boxed">
	<div class="input-slot">
		<input type="text" name="boxed-value" value="This field has value">
		<label>Boxed with Value</label>
	</div>
</div>

<div class="text-field boxed">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="boxed-placeholder">
		<label>Boxed with Placeholder</label>
	</div>
</div>
0
<div class="text-field boxed">
	<div class="input-slot">
		<input type="text" name="boxed-counter">
		<label>Boxed with Character Counter</label>
	</div>
	<div class="details">
		<div class="message"></div>
		<div class="counter">0</div>
	</div>
</div>
Max 20 characters
<div class="text-field boxed">
	<div class="input-slot">
		<input type="text" maxlength="20" name="boxed-max-length">
		<label>Boxed Max Length</label>
	</div>
	<div class="details">
		<div class="message">Max 20 characters</div>
		<div class="counter"></div>
	</div>
</div>
This field counts word instead of characters
0
<div class="text-field boxed word-counter">
	<div class="input-slot">
		<input type="text" name="boxed-counter">
		<label>Boxed with Word Counter</label>
	</div>
	<div class="details">
		<div class="message">This field counts word instead of characters</div>
		<div class="counter">0</div>
	</div>
</div>

<div class="text-field boxed field-error">
	<div class="input-slot">
		<input type="text" name="boxed-placeholder" required>
		<label>Boxed with Error</label>
	</div>
</div>

<div class="text-field boxed">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="boxed-placeholder" value="This is the value" readonly>
		<label>Read Only</label>
	</div>
</div>

<div class="text-field boxed disabled">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="boxed-placeholder" disabled>
		<label>Boxed Disabled</label>
	</div>
</div>
This field is required
0
<div class="text-field boxed field-error">
	<div class="input-slot">
		<input type="text" name="boxed-placeholder" required>
		<label>Boxed with Error</label>
	</div>
	<div class="details">
		<div class="message">This field is required</div>
		<div class="counter">0</div>
	</div>
</div>
You cannot change this field
0
<div class="text-field boxed persistent-message">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="boxed-placeholder" value="This is the value" readonly>
		<label>Read Only</label>
	</div>
	<div class="details">
		<div class="message">You cannot change this field</div>
		<div class="counter">0</div>
	</div>
</div>
This field is disabled
0
<div class="text-field boxed persistent-message disabled">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="boxed-placeholder" value="This is the value" disabled>
		<label>Boxed Disabled</label>
	</div>
	<div class="details">
		<div class="message">This field is disabled</div>
		<div class="counter">0</div>
	</div>
</div>

Solo

<div class="text-field solo">
	<div class="input-slot">
		<input type="text" name="solo-empty">
		<label>Solo Empty</label>
	</div>
</div>

<div class="text-field solo">
	<div class="input-slot">
		<input type="text" name="solo-value" value="This field has value">
		<label>Solo with Value</label>
	</div>
</div>

<div class="text-field solo">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="solo-placeholder">
		<label>Solo with Placeholder</label>
	</div>
</div>
0
<div class="text-field solo">
	<div class="input-slot">
		<input type="text" name="solo-counter">
		<label>Solo with Character Counter</label>
	</div>
	<div class="details">
		<div class="message"></div>
		<div class="counter">0</div>
	</div>
</div>
Max 20 characters
<div class="text-field solo">
	<div class="input-slot">
		<input type="text" maxlength="20" name="solo-max-length">
		<label>Solo Max Length</label>
	</div>
	<div class="details">
		<div class="message">Max 20 characters</div>
		<div class="counter"></div>
	</div>
</div>
This field counts word instead of characters
0
<div class="text-field solo word-counter">
	<div class="input-slot">
		<input type="text" name="solo-counter">
		<label>Solo with Word Counter</label>
	</div>
	<div class="details">
		<div class="message">This field counts word instead of characters</div>
		<div class="counter">0</div>
	</div>
</div>

<div class="text-field solo field-error">
	<div class="input-slot">
		<input type="text" name="solo-error" required>
		<label>Solo with Error</label>
	</div>
</div>

<div class="text-field solo">
	<div class="input-slot">
		<input type="text" name="regular-placeholder" value="Readonly value" readonly>
		<label>Read Only</label>
	</div>
</div>

<div class="text-field solo disabled">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="regular-placeholder" disabled>
		<label>Solo Disabled</label>
	</div>
</div>
This field is required
0
<div class="text-field solo field-error">
	<div class="input-slot">
		<input type="text" name="solo-placeholder" required>
		<label>Solo with Error</label>
	</div>
	<div class="details">
		<div class="message">This field is required</div>
		<div class="counter">0</div>
	</div>
</div>
You cannot change this field
0
<div class="text-field solo persistent-message">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="solo-placeholder" value="This is the value" readonly>
		<label>Solo Only</label>
	</div>
	<div class="details">
		<div class="message">You cannot change this field</div>
		<div class="counter">0</div>
	</div>
</div>
This field is disabled
0
<div class="text-field solo persistent-message disabled">
	<div class="input-slot">
		<input type="text" placeholder="Placeholder" name="solo-placeholder" value="This is the value" disabled>
		<label>Solo Disabled</label>
	</div>
	<div class="details">
		<div class="message">This field is disabled</div>
		<div class="counter">0</div>
	</div>
</div>

Solo - size

solo-s
solo-m
solo-l
solo

Solo - pill

solo-pill

Contents

  • Regular
  • Boxed
  • Solo
  •     Solo size
  •     Solo pill