Providing context and variations of input
This commit is contained in:
parent
c05a286f84
commit
ab7c6c8d84
@ -1,3 +1,7 @@
|
||||
{
|
||||
|
||||
"context": {
|
||||
"label": "Enter your value here",
|
||||
"placeholder": "A sample value",
|
||||
"message": "Please fill in anything valuable"
|
||||
}
|
||||
}
|
@ -1,10 +1,28 @@
|
||||
<h3>Regular with message</h3>
|
||||
<div class="LP-Input">
|
||||
<label for="input123" class="LP-Input__Label">First name</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field"/>
|
||||
<span class="LP-Input__Message">Field is required</span>
|
||||
<label for="input123" class="LP-Input__Label">{{label}}</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
|
||||
<span class="LP-Input__Message">{{message}}</span>
|
||||
</div>
|
||||
<h3>Regular without message</h3>
|
||||
<div class="LP-Input">
|
||||
<label for="input123" class="LP-Input__Label">First name</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" disabled="disabled"/>
|
||||
<span class="LP-Input__Message">Field is required</span>
|
||||
<label for="input123" class="LP-Input__Label">{{label}}</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
|
||||
</div>
|
||||
<h3>Regular without placeholder</h3>
|
||||
<div class="LP-Input">
|
||||
<label for="input123" class="LP-Input__Label">{{label}}</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder=""/>
|
||||
<span class="LP-Input__Message">{{message}}</span>
|
||||
</div>
|
||||
<h3>Disabled</h3>
|
||||
<div class="LP-Input LP-Input--disabled">
|
||||
<label for="input123" class="LP-Input__Label">{{label}}</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}" disabled="disabled"/>
|
||||
</div>
|
||||
<h3>Error</h3>
|
||||
<div class="LP-Input LP-Input--error">
|
||||
<label for="input123" class="LP-Input__Label">{{label}}</label>
|
||||
<input type="text" id="input123" class="LP-Input__Field" placeholder="{{placeholder}}"/>
|
||||
<span class="LP-Input__Message">{{message}}</span>
|
||||
</div>
|
Loading…
Reference in New Issue
Block a user