Elementos para formularios

Inputs básicos

<div class="bp-input-container">
    <input 
        type="text"
        placeholder="Default"
        class="bp-input bp-input--block"
    />
</div>

<div class="bp-input-container">
    <input 
        type="text"
        placeholder="With Icon"
        class="bp-input bp-input--block bp-input--withicon"
    />
    <img 
        class="bp-input-icon"
        alt="ubicacion"
        src="<?php echo e(asset("/images/icons/icon_location.svg")); ?>"
    />
</div>

<div class="bp-input-container">
    <input 
        type="text"
        placeholder="Disabled"
        disabled="true"
        class="bp-input bp-input--block bp-input--disabled"
    />
</div>

Campo obligatorio

<div class="bp-input-container">
    <input 
        type="text"
        placeholder="Error"
        class="bp-input bp-input--block bp-input--error"
    />
    <div class="bp-validation">
        <img 
            alt="Error"
            src="<?php echo e(asset("/images/icons/icon_exclamation-circle.svg")); ?>"
            class="bp-validation__icon"
        />
        Campo obligatorio
    </div>
</div>

Radio Buttons

Default

<div class="uik__radio-group">
    <label for="uik__radio-1" class="uik__radio-label .uik__radio-label--active">
        <input checked="true" type="radio" class="uik__radio-input" name="uikradio" id="uik__radio-1" value="1"/>
        <span class="uik__radio-item">Opción 1</span>
    </label>
    <label for="uik__radio-2" class="uik__radio-label">
        <input type="radio" class="uik__radio-input" name="uikradio" id="uik__radio-2" value="2"/>
        <span class="uik__radio-item">Opción 2</span>
    </label>
    <label for="uik__radio-3" class="uik__radio-label">
        <input type="radio" class="uik__radio-input" name="uikradio" id="uik__radio-3" value="3"/>
        <span class="uik__radio-item">Opción 3</span>
    </label>
    <label for="uik__radio-4" class="uik__radio-label">
        <input type="radio" class="uik__radio-input" name="uikradio" id="uik__radio-4" value="4"/>
        <span class="uik__radio-item">Opción 4</span>
    </label>
</div>

Opción 1 Opción 2 Opción 3 Opción 4

Fondo color

<div class="uik__radio-group uik__radio-group--color">
    <label for="uik__radio-color-1" class="uik__radio-label .uik__radio-label--active uik__radio-label--fondocolor">
        <input checked="true" type="radio" class="uik__radio-input" name="uikradio-color" id="uik__radio-color-1" value="1"/>
        <span class="uik__radio-item">Opción 1</span>
    </label>
    <label for="uik__radio-color-2" class="uik__radio-label uik__radio-label--fondocolor">
        <input type="radio" class="uik__radio-input" name="uikradio-color" id="uik__radio-color-2" value="2"/>
        <span class="uik__radio-item">Opción 2</span>
    </label>
    <label for="uik__radio-color-3" class="uik__radio-label uik__radio-label--fondocolor">
        <input type="radio" class="uik__radio-input" name="uikradio-color" id="uik__radio-color-3" value="3"/>
        <span class="uik__radio-item">Opción 3</span>
    </label>
    <label for="uik__radio-color-4" class="uik__radio-label uik__radio-label--fondocolor">
        <input type="radio" class="uik__radio-input" name="uikradio-color" id="uik__radio-color-4" value="4"/>
        <span class="uik__radio-item">Opción 4</span>
    </label>
</div>

Opción 1 Opción 2 Opción 3 Opción 4

Checkboxes

<div class="uik__checkbox-container">
            <div class="bp-checkbox">
                <label class="bp-checkbox__label">
                    <input type="checkbox" name="checkbox" value="1" class="bp-checkbox__input"/>
                    <span class="bp-checkbox__box"></span>
                    <span class="bp-checkbox__txt">Unchecked</span>
                </label>
            </div>
            <div class="bp-checkbox">
                <label class="bp-checkbox__label">
                    <input checked="checked" type="checkbox" name="checkbox" value="1" class="bp-checkbox__input"/>
                    <span class="bp-checkbox__box"></span>
                    <span class="bp-checkbox__txt">Checked</span>
                </label>
            </div>
        </div>

Unchecked

Checked

Switch

<div style="display:flex; gap:20px;">
    <label class="bp-formswitch">
        <input class="bp-formswitch__input" type="checkbox" />
        <div class="bp-formswitch__label">
            <div class="bp-formswitch__circle"></div>
        </div>
    </label>
    <label class="bp-formswitch">
        <input checked="true" class="bp-formswitch__input" type="checkbox" />
        <div class="bp-formswitch__label">
            <div class="bp-formswitch__circle"></div>
        </div>
    </label>
</div>

Contenido copiado