FORM

Swavy UI form is used for sending data from the client-side to the server-side. Swavy UI form has a wide variety of input styles to make your webpage look sleek

The style of the Swavy UI form input, textarea and so on can be altered by adding any Swavy UI component of your choice to the class attribute of the input tag

DEFAULT FORM INPUT

To setup Swavy UI form, add .sw_form to the class attribute of the form element.

To add rounded corners to Swavy UI form input, add sw_rsq-2 to the class attribute of the button element. You can set the depth of the rounded corners ranging from 1 - 8

To set background color for Swavy UI form input, you can use any color from the color spectrum, for example, add bg-ruby to the class attribute of the button element to add background color of ruby 

                    
<form class="sw_form">
    <label for="name">Enter Name: </label>
    <input type="text" class="sw_form-input" placeholder="Default Swavy Form Input" />
    <input type="date" class="sw_form-input sw_form-large sw_rsq-3" />

    <div class="sw_form-file-wrapper sw_rsq-6">
        <input type="file" class="sw_form-file sw_form-input" />
        <label class="sw_form-file-label"></label>
    </div>

    <select class="sw_form-select sw_form-styled sw_no-br sw_rsq-2">
        <option value="">Option1</option>
        <option value="">Option2</option>
        <option value="">Option3</option>
        <option value="">Option4</option>
    </select>
    <textarea class="sw_form-input sw_minimal"  placeholder="Swavy UI texteara minimal. Add .sw_no-resize to the class attribute of the textarea"></textarea>
</form>

FORM INPUTS WITH EFFECT

                    
<form class="sw_form">
    <input type="text" class="sw_form-input" disabled="disabled" placeholder="Disabled Form Input" />
    <input type="text" class="sw_form-input" readonly="readonly" placeholder="Readonly Form Input" />
    <input type="text" class="sw_form-input bg-blanched_almond sw_no-br sw_rsq-2" placeholder="Form Input with Background" />
    <input type="text" class="sw_form-input sw_rsq-8" placeholder="Placeholder Effect" data-placeholder-effect="true" />
    <input type="text" class="sw_form-input sw_minimal" placeholder="Form Input With Focus" data-focus="#ABCDEF" />
</form>

FORM INPUT CHECKS

                    
<form class="sw_form">
    <div class="sw_form-check-wrapper">
        <input type="checkbox" class="sw_form-check" id="sw_form-check1">
        <label class="sw_form-check-label" for="sw_form-check1">Swavy UI Checkbox1</label>

        <input type="checkbox" class="sw_form-check" id="sw_form-check2">
        <label class="sw_form-check-label" for="sw_form-check2">Swavy UI Checkbox2</label>

        <input type="checkbox" class="sw_form-check" id="sw_form-check3" disabled>
        <label class="sw_form-check-label" for="sw_form-check3">Swavy UI Checkbox Disabled</label>
    </div>

    <div class="sw_form-radio-wrapper">
        <input type="radio" class="sw_form-radio" id="sw_form-radio1">
        <label class="sw_form-radio-label" for="sw_form-radio1">Swavy UI Radio1</label>

        <input type="radio" class="sw_form-radio" id="sw_form-radio2">
        <label class="sw_form-radio-label" for="sw_form-radio2">Swavy UI Radio2</label>

        <input type="radio" class="sw_form-radio" id="sw_form-radio3" disabled>
        <label class="sw_form-radio-label" for="sw_form-radio3">Swavy UI Radio Disabled</label>
    </div>

    <label class="sw_form-toggle-wrapper" data-slider="round">
        <input type="checkbox" class="sw_form-toggle sw_form-input" />
    </label>

    <label class="sw_form-toggle-wrapper" data-slider="square">
        <input type="checkbox" class="sw_form-toggle sw_form-input" />
    </label>
</form>

FORM INPUT ADDONS

                    
<form class="sw_form">
    <div class="sw_form-addon sw_form-addon-prepend">
        <span class="addon-icon addon-merge st-dark_seagreen">
            <i class="fa-solid fa-user"></i>
        </span>
        <input type="text" class="sw_form-input" placeholder="Swavy UI Input Addon Prepend" />
    </div>

    <div class="sw_form-addon sw_form-addon-append sw_rsq-1">
        <input type="text" class="sw_form-input" placeholder="Swavy UI Input Addon Append" />
        <span class="addon-icon st-faded_pink">
            <i class="fa-solid fa-flag"></i>
        </span>
    </div>

    <div class="sw_form-addon sw_form-addon-large sw_form-addon-prepend sw_rsq-6">
        <button class="addon-icon addon-click st-mauve">
            <i class="fa-solid fa-truck"></i>
        </button>
        <input type="text" class="sw_form-input" placeholder="Swavy UI Input Addon Prepend" />
    </div>

    <div class="sw_form-addon sw_form-addon-large sw_form-addon-append sw_minimal">
        <input type="text" class="sw_form-input" placeholder="Swavy UI Input Addon Prepend" />
        <button class="addon-icon addon-click st-lavender">
            <i class="fa-solid fa-handshake"></i>
        </button>
    </div>
</form>

FORM BLOCK WITH HORIZONTAL LABEL

                    
<form class="sw_form">
    <div class="sw_form-horizontal">
        <div class="sw_form-horizontal-grid grid-10"><label>First Name:</label></div>
        <div class="sw_form-horizontal-grid grid-90"><input type="text" class="sw_form-input" placeholder="Your name..." /></div>
    </div>

    <div class="sw_form-horizontal">
        <div class="sw_form-horizontal-grid grid-20"><label>First Name:</label></div>
        <div class="sw_form-horizontal-grid grid-80"><input type="text" class="sw_form-input sw_rsq-2" placeholder="Your name..." /></div>
    </div>
</form>

FORM INPUT FLOAT

                    
<form class="sw_form">
    <div class="sw_form-float float-mid">
        <input type="text" class="sw_form-input float-input sw_rsq-2" id="float1" />
        <label for="float1">Mid Float Input</label>
    </div>

    <div class="sw_form-float">
        <input type="text" class="sw_form-input float-input sw_minima" id="float2" />
        <label for="float2">Float Input</label>
    </div>
</form>