Form Controls

Overview

Form Controls in the Phenix Design System provide a comprehensive set of styled form elements that are consistent, accessible, and easy to implement. The system includes standard controls like inputs, selects, and textareas, as well as custom controls like checkboxes, radio buttons, and switches.

Basic Usage

To style form controls, add the .form-control class to any form element:

<input type="text" placeholder="Text input" class="form-control">
<select class="form-control">
  <option value="">Select option</option>
</select>
<textarea class="form-control" placeholder="Textarea"></textarea>

For form elements that can't directly use the .form-control class, you can add the .px-form class to a parent container:

<div class="px-form" data-size="small">
  <input type="text" placeholder="Text input">
  <select>
    <option value="">Select option</option>
  </select>
</div>

Sizing Options

Form controls come in multiple predefined sizes:

<!-- Tiny size -->
<input type="text" class="form-control tiny" placeholder="Tiny input">

<!-- Small size -->
<input type="text" class="form-control small" placeholder="Small input">

<!-- Default size -->
<input type="text" class="form-control" placeholder="Default input">

<!-- Large size -->
<input type="text" class="form-control large" placeholder="Large input">

<!-- Extra large size -->
<input type="text" class="form-control xlarge" placeholder="Extra large input">

You can also specify sizes for specific breakpoints using the format .size-{breakpoint}:

<!-- Large on medium screens and up -->
<input type="text" class="form-control large-md" placeholder="Large on medium screens">

Validation States

Form controls support different validation states:

<!-- Error state -->
<input type="text" class="form-control error" placeholder="Error state">

<!-- Warning state -->
<input type="text" class="form-control warning" placeholder="Warning state">

<!-- Success state -->
<input type="text" class="form-control success" placeholder="Success state">

<!-- Disabled state -->
<input type="text" class="form-control disable" placeholder="Disabled state">

Controls with Icons

You can add icons to form controls using the .control-icon wrapper:

<div class="control-icon fas fa-user">
  <input type="text" class="form-control" placeholder="Username">
</div>

<!-- Icon at the end -->
<div class="control-icon fas fa-envelope icon-end">
  <input type="text" class="form-control" placeholder="Email">
</div>

Fieldsets and Groups

Group related form controls using fieldsets:

<fieldset class="w-max-360 pdx-20 pdb-20 mb-30 bg-white border-alpha-10 radius-gl">
  <legend class="pdx-15 pdy-5 mb-5 bg-white strong-weight radius-gl">Personal Information</legend>
  
  <label class="mb-5">First name:</label>
  <input type="text" class="form-control small mb-20">
  
  <label class="mb-5">Last name:</label>
  <input type="text" class="form-control small mb-20">
  
  <input type="submit" value="Submit" class="btn primary small miw-120">
</fieldset>

Option Controls

Custom styled checkboxes and radio buttons can be created using the .option-control class with a data-type attribute:

<!-- Checkbox -->
<label class="option-control" data-type="checkbox">
  <input type="checkbox" name="check-1">
  <span class="fas fa-check">Checkbox Example</span>
</label>

<!-- Radio button -->
<label class="option-control" data-type="radio">
  <input type="radio" name="radio-1">
  <span class="fas fa-circle">Radio Example</span>
</label>

Inline Controls

Form controls can be displayed inline using the .inline class:

<p>
  This text has an inline form control
  <input type="text" placeholder="Inline Control" class="form-control tiny inline ms-5 me-5">
  that can be part of any other block or inline-block element.
</p>

Customization

Form controls can be customized using CSS variables:

.form-control {
  /* Size options */
  --height: 42px;
  --padding: 15px;
  --txt-size: 15px;
  --txt-weight: var(--medium-weight);
  
  /* Appearance options */
  --radius: 4px;
  --color: var(--dark-color);
  --box-shadow: unset;
  --background: #FFFFFF;
  --border-size: 1px;
  --border-color: rgba(0,0,0, 0.1);
}

Available Classes

Class	Description	Element
.form-control	Main controller style class	<input>, <select>, <textarea>
.px-form	Controls wrapper to style elements that can't have .form-control	Container element
.tiny	Tiny size	.form-control elements
.small	Small size	.form-control elements
.large	Large size	.form-control elements
.xlarge	Extra large size	.form-control elements
.size-{breakpoint}	Size from specific breakpoint and up	.form-control elements
.control-icon	Wrapper to add icon to form control	Container element
.icon-end	Places icon at the end	.control-icon element
.inline	Makes form control behave like inline element	.form-control elements
.error	Error state styling	.form-control elements
.warning	Warning state styling	.form-control elements
.success	Success state styling	.form-control elements
.disable	Disabled state styling	.form-control elements
[data-size]	Resizes all controls in a .px-form wrapper	.px-form element
.option-control	Custom styled checkbox/radio controllers	Container element