Style-Forge

Appearance

Validate ​

This section provides examples of input elements with validation that can be used in HTML forms. Each example includes the HTML code and styling using various classes such as sf-input, sf-checkbox, sf-select, sf-textarea, and sf-switch.

There are three additional classes: sf-description, sf-invalid, and sf-valid. These classes are effective when the element is given the validates class.

Block description ​

html
<div class="sf-description">Text description</div>

Block invalid ​

html
<div class="sf-invalid">❌ Text error</div>

Block valid ​

html
<div class="sf-valid">✅ Text success</div>

Required Input ​




<input class="sf-input validates" placeholder="Required Input" required />
html

Input with Pattern ​

Text description
❌ Text error

<input class="sf-input validates" placeholder="Pattern Input" pattern="\w{3,16}" />
<div class="sf-description">Text description</div>
<div class="sf-invalid">❌ Text error</div>
html

Always show error ​

❌ Text error

<input class="sf-input error" placeholder="text" />
<div class="sf-invalid">❌ Text error</div>
html

Checkbox ​


<label class="sf-checkbox validates">
  <input type="checkbox" required /> <span>Checkbox</span>
  <div class="sf-invalid">❌ Text error</div>
  <div class="sf-valid">✅ Text success</div>
</label>
html

INFO

- sf-description not work

Select ​

❌ Text error
✅ Text success

<select :class="ldgSelect" multiple required">
  <option value="option 1">option 1</option>
  <option value="option 2">option 2</option>
  <option value="option 3">option 3</option>
  <option value="option 4">option 4</option>
</select>
<div class="sf-invalid">❌ Text error</div>
<div class="sf-valid">✅ Text success</div>
html

INFO

- Only multiple
- sf-description not work

Textarea ​

Text description
❌ Text error
✅ Text success

<textarea class="sf-textarea validates" placeholder="textarea" required></textarea>
<div class="sf-description">Text description</div>
<div class="sf-invalid">❌ Text error</div>
<div class="sf-valid">✅ Text success</div>
html

Switch ​


<label class="sf-switch validates">
  <input type="checkbox" required /> <span>Some text</span>
  <div class="sf-invalid">❌ Text error</div>
  <div class="sf-valid">✅ Text success</div>
</label>
html

INFO

- sf-description not work

Auth form validate ​

Here is an example showing that a form can be assigned the class validates, and the type="submit" button will be inactive until all conditions are met.

Text description
❌ Text error
✅ Text success
Text description
❌ Text error
✅ Text success

<form class="d:f validates" action="#">
  <fieldset class="d:f:y shift">
    <div class="d:f:x auto wrap">
      <div>
        <input class="sf-input validates" type="email" placeholder="email" pattern="\w+@\w+\.\w{2,}" required />
        <div class="sf-description">Text description</div>
        <div class="sf-invalid">❌ Text error</div>
        <div class="sf-valid">✅ Text success</div>
      </div>
      <div>
        <input class="sf-input validates" type="password" placeholder="password" pattern="\w{3,16}" required autocomplete="off" />
        <div class="sf-description">Text description</div>
        <div class="sf-invalid">❌ Text error</div>
        <div class="sf-valid">✅ Text success</div>
      </div>
    </div>
    <div class="shift right">
      <button class="sf-button" type="submit">Login</button>
    </div>
  </fieldset>
</form>
html

Conclusion ​

Using these examples, you can create forms with input elements that have validation. All elements are styled using the sf-input class for a consistent look and feel.