Skip to main content

Form Elements

Component status:Beta
Form elements are used for creating user input fields.

Text Field#

Primary#

Helper Text
<label class="bux-form__label" for="textInput">Form Input Label</label>
<span class="bux-form__helper-text" for="textInput">Helper Text</span>
<input id="textInput" class="bux-form__text-field" placeholder="Placeholder Text (Optional)" />

Disabled#

Helper Text
<span class="bux-form__helper-text" for="textInput">Helper Text</span>
<input id="textInput" class="bux-form__text-field bux-form__text-field--disabled" aria-disabled="true" disabled="disabled" placeholder="Placeholder Text (Optional)" />

Error#

Helper TextError helper text
<label class="bux-form__label" for="textInput">Form Input Label</label>
<span class="bux-form__helper-text" for="textInput">Helper Text</span>
<input id="textInput" class="bux-form__text-field bux-form__text-field--error" placeholder="Placeholder Text (Optional)" />
<span class="bux-form__text-field--error__message">Error helper text</span>

Password Field#

Helper Text
<label class="bux-form__label" for="passwordInput">Form Input Label</label>
<span class="bux-form__helper-text" for="passwordInput">Helper Text</span>
<input id="passwordInput" class="bux-form__text-field bux-form__text-field--password" type="password" placeholder="Placeholder Text (Optional)" />
<button class="bux-form__text-field--password__icon bux-form__text-field--password__icon--view bux-tooltip__button" id="passwordToggle" onclick="passwordToggle()" title="Show Password"></button>

Text Area#

Primary#

Helper Text
<label class="bux-form__label" for="text-area">Form Input Label</label>

<span class="bux-form__helper-text" for="text-area">Helper Text</span>

<textarea id="text-area" class="bux-form__text-area" placeholder="Placeholder Text (Optional)"></textarea>

Disabled#

Helper Text
<label class="bux-form__label" for="text-area">Form Input Label</label>

<span class="bux-form__helper-text" for="text-area">Helper Text</span>

<textarea id="text-area" class="bux-form__text-area bux-form__text-area--disabled" aria-disabled="true" disabled="disabled" placeholder="Placeholder Text (Optional)"></textarea>

Error#

Helper TextError helper text
<label class="bux-form__label" for="text-area">Form Input Label</label>

<span class="bux-form__helper-text" for="text-area">Helper Text</span>

<textarea id="text-area" class="bux-form__text-area bux-form__text-area--error" placeholder="Placeholder Text (Optional)"></textarea>

<span class="bux-form__text-field--error__message">Error helper text</span>

Checkbox#

Primary#

Helper Text
<label class="bux-form__label" for="bux-checkbox">Form Input Label</label>

<span class="bux-form__helper-text" for="bux-checkbox">Helper Text</span>

<div class="bux-form__wrapper" id="bux-checkbox">

<div class="bux-checkbox ">
<input type="checkbox" id="bux-checkbox-Item 1" value="bux-checkbox-Item 1">
<label for="bux-checkbox-Item 1">Item 1</label>
</div>

<div class="bux-checkbox ">
<input type="checkbox" id="bux-checkbox-Item 2" value="bux-checkbox-Item 2">
<label for="bux-checkbox-Item 2">Item 2</label>
</div>

<div class="bux-checkbox ">
<input type="checkbox" id="bux-checkbox-Item 3" value="bux-checkbox-Item 3">
<label for="bux-checkbox-Item 3">Item 3</label>
</div>

</div>

Disabled#

Helper Text
<label class="bux-form__label" for="bux-checkbox">Form Input Label</label>

<span class="bux-form__helper-text" for="bux-checkbox">Helper Text</span>

<div class="bux-form__wrapper" id="bux-checkbox">

<div class="bux-checkbox bux-checkbox--disabled">
<input type="checkbox" id="bux-checkbox-Item 1" value="bux-checkbox-Item 1" disabled>
<label for="bux-checkbox-Item 1">Item 1</label>
</div>

<div class="bux-checkbox bux-checkbox--disabled">
<input type="checkbox" id="bux-checkbox-Item 2" value="bux-checkbox-Item 2" disabled>
<label for="bux-checkbox-Item 2">Item 2</label>
</div>

<div class="bux-checkbox bux-checkbox--disabled">
<input type="checkbox" id="bux-checkbox-Item 3" value="bux-checkbox-Item 3" disabled>
<label for="bux-checkbox-Item 3">Item 3</label>
</div>

</div>

Radio Button#

Primary#

Helper Text
<label class="bux-form__label" for="bux-radio-button">Form Input Label</label>

<span class="bux-form__helper-text" for="bux-radio-button">Helper Text</span>

<div class="bux-form__wrapper" id="bux-radio-button">

<div class="bux-radio ">
<input type="radio" id="radio-Item 1" name="bux-radio-form">
<label for="radio-Item 1">Item 1</label>
</div>

<div class="bux-radio ">
<input type="radio" id="radio-Item 2" name="bux-radio-form">
<label for="radio-Item 2">Item 2</label>
</div>

<div class="bux-radio ">
<input type="radio" id="radio-Item 3" name="bux-radio-form">
<label for="radio-Item 3">Item 3</label>
</div>

</div>

Disabled#

Helper Text
<label class="bux-form__label" for="bux-radio-button">Form Input Label</label>

<span class="bux-form__helper-text" for="bux-radio-button">Helper Text</span>

<div class="bux-form__wrapper" id="bux-radio-button">

<div class="bux-radio bux-radio--disabled">
<input type="radio" id="radio-Item 1" name="bux-radio-form" disabled>
<label for="radio-Item 1">Item 1</label>
</div>

<div class="bux-radio bux-radio--disabled">
<input type="radio" id="radio-Item 2" name="bux-radio-form" disabled>
<label for="radio-Item 2">Item 2</label>
</div>

<div class="bux-radio bux-radio--disabled">
<input type="radio" id="radio-Item 3" name="bux-radio-form" disabled>
<label for="radio-Item 3">Item 3</label>
</div>

</div>

Toggle#

Primary#

Helper Text
<label class="bux-form__label" for="bux-switch">Form Input Label</label>

<span class="bux-form__helper-text" for="bux-switch">Helper Text</span>

<div class="bux-form__wrapper" id="bux-switch">

<div class="bux-switch ">
<input type="checkbox" id="bux-switch-Item 1">
<label for="bux-switch-Item 1">Item 1</label>
</div>

<div class="bux-switch ">
<input type="checkbox" id="bux-switch-Item 2">
<label for="bux-switch-Item 2">Item 2</label>
</div>

<div class="bux-switch ">
<input type="checkbox" id="bux-switch-Item 3">
<label for="bux-switch-Item 3">Item 3</label>
</div>

</div>

Disabled#

Helper Text
<label class="bux-form__label" for="bux-switch">Form Input Label</label>

<span class="bux-form__helper-text" for="bux-switch">Helper Text</span>

<div class="bux-form__wrapper" id="bux-switch">

<div class="bux-switch bux-switch--disabled">
<input type="checkbox" id="bux-switch-Item 1" disabled>
<label for="bux-switch-Item 1">Item 1</label>
</div>

<div class="bux-switch bux-switch--disabled">
<input type="checkbox" id="bux-switch-Item 2" disabled>
<label for="bux-switch-Item 2">Item 2</label>
</div>

<div class="bux-switch bux-switch--disabled">
<input type="checkbox" id="bux-switch-Item 3" disabled>
<label for="bux-switch-Item 3">Item 3</label>
</div>

</div>

Dropdown#

Primary#

Helper Text
<label class="bux-form__label" for="bux-selection-dropdown">Form Input Label</label>

<span class="bux-form__helper-text" for="">Helper Text</span>

<div class="bux-selection-dropdown " id="">
<select>
<option>Choose one</option>
<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>
<option value="Option 5">Option 5</option>
</select>
</div>

Disabled#

Helper Text
<label class="bux-form__label" for="bux-selection-dropdown">Form Input Label</label>

<span class="bux-form__helper-text" for="">Helper Text</span>

<div class="bux-selection-dropdown bux-selection-dropdown--disabled" id="">
<select disabled>
<option>Choose one</option>
<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>
<option value="Option 5">Option 5</option>
</select>
</div>