Form

Component for form elements
oo-inputoo-selectoo-checkboxoo-radiooo-toggle

The style of each form element is set through the props & states properties giving you control on each component appearance.

Loop config only includes input by default. Enable the others one from the config or via the mixins.

// Auto
@include ooCreate((
  use: (
    form: true, // include all
  )
));
// Manual
@include ooInit();
@include Label();
@include InputField();
@include SelectField();
@include Checkbox();
@include Radio();
@include Toggle();

# Input fields

Use oo-input for any textfield elements.

//default config
label: (
  props: (
    margin-bottom: rem(3),
    display: inline-block,
    font-weight: 500,
    line-height: 1.5
  )
),
input: (
  props: (
    padding: .5em .625em,
    display: block,
    width: 100%,
    min-height: 2.5em,
    color: #4d4d4d,
    font-size: 1rem,
    line-height: 1.15,
    background-color: #fff,
    border: 1px solid #d6d6d6,
    border-radius: .2em,
  ),
  states: (
    focus: (
      outline: none,
      box-shadow: 0 0 8px 0 rgba(#aaa, .25),
    ),
  ),
),

<label for="form-input">Input</label>
<input oo-input id="form-input" class="mb-15" type="text">

<label for="form-textarea">Textarea</label>
<textarea oo-input id="form-textarea" rows="3"></textarea>

Variants

Change the size, the shape, the appearance of the input via the variants property by passing a list of css rules attached to a name. oo-input="variantName".

//default config
input: (
  props: (...),
  states: (...),
  variants: (), // none
),

$ooLoop: ooAdd('input.variants', (
  'danger': (
    border-color: #ca7878,
    background-color: #f9e4e4,
  ),
  'large': (
    padding: 1rem 1.25rem,
  ),
  'rounded': (
    border-radius: 50em,
  )
));
<label for="form-input-rounded">Input rounded large</label>
<input oo-input="rounded large" class="mb-15" id="form-input-rounded" type="text">

<label for="form-textarea-danger">Textarea danger</label>
<textarea oo-input="danger" id="form-textarea-danger" rows="4"></textarea>

# Select

Use oo-select on a parent element having <select> as a child.

//default config
select: (
  props: this('input.props'), // inherits from input
  states: this('input.states'), // inherits from input
  caret: ( // caret options are not PROPS!
    size: 10px,
    weight: 2px,
    color: this('select.props.color'),
    bgcolor: this('select.props.backgroundColor'),
    border: this('select.props.border'),
  ),
  variants: this('input.variants'), // inherits from input
),

<label for="form-select">Select</label>
<div oo-select class="mb-15">
  <select id="form-select">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

<label for="form-rounded">Select rounded danger large</label>
<div oo-select="rounded danger large">
  <select id="form-rounded">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

Caret

The caret can be modified from the property caret or altered through a variant having also caret as a property. Caret options are not CSS props!.

$ooLoop: ooAdd('select.variants', (
  'secondary': (
    border-color: #222,
    caret: (
      color: #fff,
      bgcolor: #222,
    )
  ),
));
<label for="form-select-secondary">Select</label>
<div oo-select="secondary">
  <select id="form-select-secondary">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>

# Checkbox

Use oo-checkbox on an input checkbox element followed by a label element targetting that checkbox.

//default config
checkbox: (
  props: (
    background-color: #fff,
    border: 1px solid #d6d6d6,
    border-radius: .2em,
    transition: background-color 250ms ease-out,
  ),
  checked: (
    markColor: #fff,
    props: (
      background-color: #4d4d4d,
      border: 1px solid #4d4d4d,
    )
  ),
  sizes: (
    default: rem(18),
  ),
  screens: (),
)

<input oo-checkbox id="checkbox-a" type="checkbox" value="a">
<label for="checkbox-a">Checkbox A</label>

<input oo-checkbox id="checkbox-b" type="checkbox" value="b">
<label for="checkbox-b">Checkbox B</label>

Set inline checkboxes with oo-checkbox="inline"

<input oo-checkbox="inline" id="checkbox-inline-a" type="checkbox" value="a">
<label for="checkbox-inline-a">Inline A</label>

<input oo-checkbox="inline" id="checkbox-inline-b" type="checkbox" value="b">
<label for="checkbox-inline-b">Inline B</label>

Checkbox Sizes

Add more options to the property sizes

$ooLoop: ooAdd('checkbox.sizes', (
  'medium': 1.5rem,
  'large': 2rem,
));
<input oo-checkbox="medium " id="checkbox-medium-a" type="checkbox" value="a">
<label for="checkbox-medium-a">Checkbox Medium A</label>

<input oo-checkbox="large " id="checkbox-large-b" type="checkbox" value="b">
<label for="checkbox-large-b">Checkbox Large B</label>

Responsive Checkbox

Pass the breakpoint screens you wish to use for the checkbox and create variants such as oo-checkbox="sizeName@screenName"

$ooLoop: ooSet('checkbox.screens', (sm, md));
// creating default@sm default@md medium@sm medium@md large@sm large@md
<input oo-checkbox="large medium@sm default@md" id="checkbox-responsive" type="checkbox">
<label for="checkbox-responsive">Responsive Checkbox</label>

# Radio

Use oo-radio on an input radio element followed by a label element targetting that radio.

//default config
radio: (
  props: (
    background-color: #fff,
    border: 1px solid #d6d6d6,
  ),
  checked: (
    markColor: #fff,
    props: (
      background-color: #4d4d4d,
      border-color: #4d4d4d,
      transition: background-color 250ms ease-out,
    )
  ),
  sizes: (
    default: rem(18),
  ),
  screens: (),
),

<input oo-radio id="radio-a" name="radio" type="radio" value="a">
<label for="radio-a">radio A</label>

<input oo-radio id="radio-b" name="radio" type="radio" value="b">
<label for="radio-b">radio B</label>

Set inline radios with oo-radio="inline"

<input oo-radio="inline" id="radio-inline-a" name="radio-inline" type="radio" value="a">
<label for="radio-inline-a">Inline A</label>

<input oo-radio="inline" id="radio-inline-b" name="radio-inline" type="radio" value="b">
<label for="radio-inline-b">Inline B</label>

Radio Sizes

Add more options to the property sizes

$ooLoop: ooAdd('radio.sizes', (
  'large': 2rem,
));
<input oo-radio="large" id="radio-large-a" type="radio" value="a">
<label for="radio-large-a">radio Large A</label>

Responsive Radio

Pass the breakpoint screens you wish to use for the radio and create variants such as oo-radio="sizeName@screenName"

$ooLoop: ooSet('radio.screens', (md));
// creating default@md large@md
<input oo-radio="large default@md" id="radio-responsive" type="radio" value="">
<label for="radio-responsive">Responsive radio</label>

# Toggle

Use oo-toggle on an input checkbox element followed by a label element targetting that checkbox.

//default config
toggle: (
  props: (
    border: 1px solid #d6d6d6,
    border-radius: 50em,
    background-color: #d6d6d6,
    transition: (background-color 300ms ease-in-out, border-color 300ms ease-in-out),
  ),
  toggler: ( // Props
    border-radius: 50%,
    background-color: #fff,
    box-shadow: 1px 1px 2px 0 rgba(#4d4d4d, 0.3),
    transition: transform 300ms ease-out,
  ),
  checked: (
    props: (
      border-color: #4d4d4d,
      background-color: this('toggle.checked.props.borderColor'),
    )
  ),
  sizes: (
    default: 1.5rem,
  )
),

<input oo-toggle id="toggle-a" type="checkbox" value="a">
<label for="toggle-a">Toggle A</label>

Toggle Sizes

Add more options to the property sizes

$ooLoop: ooAdd('toggle.sizes', (
  'large': 2rem,
));
<input oo-toggle="large" id="toggle-large-a" type="checkbox" value="a">
<label for="toggle-large-a">Toggle Large A</label>

# Utilities as modifiers

Text or color utilities can help you alter the size or the appearance of your input elements.

Example of form with required elements throwing an error
(use of border utility)

Input is required
Select is required
Checkbox is required
Radio is required
<p><strong>Example of form with required elements throwing an error
<br><em>(use of border-danger utility)</em></strong></p>

<label for="input-error">Text input with error</label>
<input class="border-danger" oo-input id="input-error" type="text">
<small class="color-danger">Input is required</small>

<br>
<label for="select-error" class="mt-15">Select with error</label>
<div class="border-danger" oo-select>
  <select id="select-error">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>
</div>
<small class="color-danger">Select is required</small>

<br>
<input class="border-danger" oo-checkbox id="checkbox-error" type="checkbox">
<label for="checkbox-error" class="mt-15">checkbox with error</label>
<small class="color-danger">Checkbox is required</small>

<br>
<input class="border-danger" oo-radio id="radio-error" type="radio">
<label for="radio-error" class="mt-15">Radio with error</label>
<small class="color-danger">Radio is required</small>

Use Button << >> Use Helper classes