Forms

Use form, label, input, select, textarea, help text, and validation helpers together.

Overview

BCL form helpers wrap Bootstrap form controls while keeping Razor declarative. Pair each control with a visible label where possible, and use help text or validation messages for constraints that are not obvious from the label alone.

Controls render Bootstrap classes but still follow normal HTML form behavior, so browser validation, disabled fieldsets, method/action attributes, and model-bound names remain part of the underlying form contract.

Form controls

Use bs-input, bs-textarea, and related helpers for Bootstrap form controls. Visible labels, help text, and validation feedback should stay close to the control they describe.

We will never share your email.
aspnet 

<bs-form method="get">
    <bs-div bottom-margin="Default3">
        <bs-label>Email address</bs-label>
        <bs-input id="docsEmail" input-type="Email" placeholder-text="name@example.com" />
        <bs-div form-text="true">We will never share your email.</bs-div>
    </bs-div>
    <bs-div bottom-margin="Default3">
        <bs-label>Example textarea</bs-label>
        <bs-textarea id="docsTextarea" rows="3" placeholder-text="Add context"></bs-textarea>
    </bs-div>
    <bs-div bottom-margin="Default3">
        <bs-label>Plain text display</bs-label>
        <bs-input value="name@example.com" plaintext="true" />
    </bs-div>
    <bs-button btn-style="Primary">Submit</bs-button>
</bs-form>

Selects

Use bs-select for native select menus, including multiple selects, visible option counts, and typed visual sizing with select-size.

aspnet 

<bs-label>Default select</bs-label>
<bs-select id="docsSelect" bottom-margin="Default3">
    <bs-option value="">Open this select menu</bs-option>
    <bs-option value="1">One</bs-option>
    <bs-option value="2">Two</bs-option>
    <bs-option value="3">Three</bs-option>
</bs-select>
<bs-label>Small select</bs-label>
<bs-select id="docsSmallSelect" select-size="Small" bottom-margin="Default3">
    <bs-option value="">Small select menu</bs-option>
    <bs-option value="1">One</bs-option>
    <bs-option value="2">Two</bs-option>
</bs-select>
<bs-label>Large select</bs-label>
<bs-select id="docsLargeSelect" select-size="Large" bottom-margin="Default3">
    <bs-option value="">Large select menu</bs-option>
    <bs-option value="1">One</bs-option>
    <bs-option value="2">Two</bs-option>
</bs-select>
<bs-label>Multiple select</bs-label>
<bs-select id="docsMultiSelect" multiple="true" size="3">
    <bs-option value="1">One</bs-option>
    <bs-option value="2">Two</bs-option>
    <bs-option value="3">Three</bs-option>
</bs-select>

File, color, and range

Specialized input types continue to use normal browser behavior. BCL forwards the input type and Bootstrap styling while the browser owns file picker, color picker, and range interactions.

aspnet 

<bs-div bottom-margin="Default3">
    <bs-label>File input</bs-label>
    <bs-input input-type="File" />
</bs-div>
<bs-div bottom-margin="Default3">
    <bs-label>Color picker</bs-label>
    <bs-input input-type="Color" value="#0d6efd" />
</bs-div>
<bs-div>
    <bs-label>Range</bs-label>
    <bs-range min="0" max="5" step="0.5" />
</bs-div>

Sizing and disabled state

Use size classes or helper properties where available for large and small controls. Disabled controls are not submitted, so use readonly or plaintext display when a value still needs to be reviewed.

aspnet 

<bs-input size="Large" placeholder-text="Large input" bottom-margin="Default2" />
<bs-input placeholder-text="Default input" bottom-margin="Default2" />
<bs-input size="Small" placeholder-text="Small input" bottom-margin="Default2" />
<bs-input placeholder-text="Disabled input" disabled="true" bottom-margin="Default2" />
<bs-select disabled="true">
    <bs-option value="">Disabled select</bs-option>
</bs-select>

Disabled forms

A disabled fieldset disables most contained controls at the browser level. Keep the legend readable so users understand why the group is unavailable.

Disabled fieldset example
aspnet 

<bs-form method="get">
    <fieldset disabled>
        <legend heading-style-level="Six">Disabled fieldset example</legend>
        <bs-div bottom-margin="Default3">
            <bs-label>Disabled input</bs-label>
            <bs-input placeholder-text="Disabled input" />
        </bs-div>
        <bs-div bottom-margin="Default3">
            <bs-label>Disabled select</bs-label>
            <bs-select>
                <bs-option value="">Disabled select menu</bs-option>
            </bs-select>
        </bs-div>
        <bs-check bottom-margin="Default3">
            <bs-input />
            <bs-label>Cannot check this</bs-label>
        </bs-check>
        <bs-button btn-style="Primary">Submit</bs-button>
    </fieldset>
</bs-form>

Accessibility

Use labels for every interactive control. If additional help text is required, connect it with ids and ARIA descriptions when the helper does not infer that relationship automatically.

Disabled controls are not submitted with forms and can be skipped by assistive technology. Use readonly or plaintext controls when users still need to review a value.

Layout

Use grid helpers to arrange form controls across breakpoints. Keep labels and validation messages inside the same column as their controls.

aspnet 

<bs-form method="get">
    <bs-row x-gutter="Default3" y-gutter="Default3">
        <bs-div span="Twelve" span-md="Six">
            <bs-label>First name</bs-label>
            <bs-input id="docsFirstName" />
        </bs-div>
        <bs-div span="Twelve" span-md="Six">
            <bs-label>Last name</bs-label>
            <bs-input id="docsLastName" />
        </bs-div>
        <bs-div span="Twelve" span-md="Six">
            <bs-label>City</bs-label>
            <bs-input id="docsCity" />
        </bs-div>
        <bs-div span="Six" span-md="Four">
            <bs-label>State</bs-label>
            <bs-select id="docsState">
                <bs-option value="">Choose...</bs-option>
                <bs-option value="TX">Texas</bs-option>
            </bs-select>
        </bs-div>
        <bs-div span="Six" span-md="Two">
            <bs-label>Zip</bs-label>
            <bs-input id="docsZip" />
        </bs-div>
    </bs-row>
</bs-form>