Inputs

On this page we will talk about how to style inputs for a form with FlatifyCSS, by default inputs get FlatifyCSS style but you can reset to default with the .default class.

Label

Inline label

By default input labels are inline until you add .form-label which is necessary, in this case, if you add the .inline class to the <label> it will be inline.

index.html

<label class="form-label inline" for="my-text-input">Enter you name</label>
<input id="my-text-input" type="text" placeholder="Enter you name" />

<label class="form-label" for="my-text-input"> Enter you name </label>
<input id="my-text-input" type="text" placeholder="Enter you name" />

Floating label

The floating label is inside the input and it seems like a placeholder, how it works is done by pure CSS and it is necessary to set a placeholder for input, though it does not show it. To have a floating label first wrap both input and label with .input-wrapper & .floating-label classes and place the label after input.

Textarea floating label

Note that if you want to have the floating label for <textarea> should add the .is-textarea class to the .input-wrapper.

index.html

<!-- input -->
<div class="input-wrapper floating-label">
  <input id="my-text-input" type="text" placeholder="Enter you name" />
  <label for="my-text-input" class="form-label">Enter you name</label>
</div>

<!-- textarea -->
<div class="input-wrapper is-textarea floating-label">
  <textarea id="thoughts" name="thoughts" rows="4" placeholder="What do you think?"></textarea>
  <label id="thoughts" class="form-label" name="thoughts" for="yourname">What do you think?</label>
</div>

Validation

Input invalid state is red by default however you can have valid and warning states as well. You can use .valid, .warning, .invalid classes both for input or input wrapper. The diffrence between them is simple if you add these classes to the .input-wrapper it will show an indicator icon.

index.html

<!-- Validation classes added to the input -->
<label for="my-text-input-1" class="form-label">Enter you name</label>
<div class="input-wrapper">
  <input class="valid" id="my-text-input-1" type="text" placeholder="Enter you name" />
</div>

<label for="my-text-input-2" class="form-label">Enter you name</label>
<div class="input-wrapper">
  <input class="warning" id="my-text-input-2" type="text" placeholder="Enter you name" />
</div>

<label for="my-text-input-3" class="form-label">Enter you name</label>
<div class="input-wrapper">
  <input class="invalid" id="my-text-input-3" type="text" placeholder="Enter you name" />
</div>

<!-- Validation classes added to the .input-wrapper -->
<label for="my-text-input-4" class="form-label">Enter you name</label>
<div class="input-wrapper valid">
  <input id="my-text-input-4" type="text" placeholder="Enter you name" />
</div>

<label for="my-text-input-5" class="form-label">Enter you name</label>
<div class="input-wrapper warning">
  <input id="my-text-input-5" type="text" placeholder="Enter you name" />
</div>

<label for="my-text-input-6" class="form-label">Enter you name</label>
<div class="input-wrapper invalid">
  <input id="my-text-input-6" type="text" placeholder="Enter you name" />
</div>

Here is an example of how to use validation classes to have a dynamic input.

index.html

<div class="input-wrapper floating-label">
  <input required id="password" type="password" placeholder="Enter new password" />
  <label for="password" class="form-label">Enter new password</label>
</div>
<p class="help-text size-sm">Password length should be more than 8 chars with letters.</p>

main.js

const elem_wrapper = document.querySelector(".input-wrapper");
const elem_password = document.querySelector("#password");
const elem_help = document.querySelector(".help-text");

// check on keyup
elem_password.addEventListener("keyup", function () {
  // should have length of eight chars
  if (elem_password.value.length >= 8) {
    // should have at least one letter
    if (/[a-zA-Z]/.test(elem_password.value)) {
      elem_wrapper.classList.remove("invalid", "warning");
      elem_wrapper.classList.add("valid");
      elem_help.innerText = "You chose the perfect password!";
    } else {
      elem_wrapper.classList.remove("invalid", "valid");
      elem_wrapper.classList.add("warning");
      elem_help.innerText = "You can add some letters as well!";
    }
  } else {
    // invalid if does not have 8 chars length and letter
    elem_wrapper.classList.remove("valid", "warning");
    elem_wrapper.classList.add("invalid");
    elem_help.innerText = "Password length should be more than 8 chars.";
  }
});

Password visibilty toggle

It is a built-in button that helps you change the type of input from password to text, so the user can see the password. Having this button is pretty simple you just need to add a <button> with .show-password-button class inside the .input-wrapper.toggle-password wrapper.

Accessibility matters!

You do not need to add anything inside the show password button element but it is necessary to set an aria-label HTML attribute for accessibility purposes. Read more about aria-label usage.

index.html

<label for="password" class="form-label">New password</label>
<div class="input-wrapper">
  <input required id="password" type="password" placeholder="Enter new password" />
  <button class="show-password-button" aria-label="Show password"></button>
</div>

Change eye icon

It is possible to change the eye icon with both _config.scss and CSS variables.

Inside _config.scss find $EYE_ICON and set svg of customized icon with this format:

_config.scss

$EYE_ICON: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

change its CSS variable:

style.css

--flatify__eye-icon: url("data:image/svg+xml; utf8, YOUR SVG CODE HERE");

Sizes

To change the input size use size setter classes. These classes just set a font-size property so it is possible to change it yourself by writing custom CSS.

index.html

<div class="size-xs">
  <label for="my-datetime-input-sm" class="form-label">Make an appointment</label>
  <input id="my-datetime-input-sm" type="datetime-local" placeholder="Make an appointment" />
</div>

<div class="size-md">
  <label for="my-datetime-input-md" class="form-label">Make an appointment</label>
  <input id="my-datetime-input-md" type="datetime-local" placeholder="Make an appointment" />
</div>

<div class="size-lg">
  <label for="my-datetime-input-lg" class="form-label">Make an appointment</label>
  <input id="my-datetime-input-lg" type="datetime-local" placeholder="Make an appointment" />
</div>

<div class="size-3x">
  <label for="my-datetime-input-3x" class="form-label">Make an appointment</label>
  <input id="my-datetime-input-3x" type="datetime-local" placeholder="Make an appointment" />
</div>

Colors

There are helper classes for styling inputs, first read about color setter classes for having button with diffrent background and text color.

index.html

<!-- Color pickers -->
<input type="color" value="#ED5565" />
<input type="color" value="#2ECC71" class="style-green-light" />
<input type="color" value="#FFCE54" class="style-blue-light" />
<input type="color" value="#48CFAD" class="style-dark" />
<!-- Range -->
<input type="range" class="style-purple" />
<!-- File -->
<input type="file" class="style-yellow-light" />
<!-- Number -->
<label for="your-age" class="form-label">Age</label>
<input id="your-age" type="number" class="style-blue" />
<!-- Text -->
<label for="your-name" class="form-label">Name</label>
<input class="style-orange" id="your-name" type="text" placeholder="Write something..." />
<!-- Password -->
<div class="input-wrapper toggle-password">
  <input class="style-dark" id="password" type="password" placeholder="Write something..." />
  <button class="show-password-button style-dark" aria-label="Show password"></button>
</div>
<!-- Buttons -->
<input type="reset" class="style-red-light" value="Reset" />
<input type="submit" class="style-red" value="Submit" />

Customization

There are CSS variables for customizing form inputs:

--flatify__form-element-accent-color
--flatify__form-element-bg-color
--flatify__form-element-txt-color
--flatify__form-element-border-color
--flatify__form-element-border-color__focus
--flatify__form-element-border-color__valid
--flatify__form-element-border-color__warning
--flatify__form-element-border-color__invalid

Here is an example of these variables usage:

style.css

:root {
    --flatify__form-element-accent-color: #37BC9B;
    --flatify__form-element-bg-color: #ffce54;
    --flatify__form-element-txt-color: #434a54;
    --flatify__form-element-border-color: #ffce54;
    --flatify__form-element-border-color__focus: #f6bb42;
    --flatify__form-element-border-color__valid: #5d9cec;
    --flatify__form-element-border-color__warning: #8067b7;
    --flatify__form-element-border-color__invalid: #bf263c;ch
}

Style every input differently!

Note that you do not have to set these variables as root, you can style .input-wrapper or each input element as well.

Label​

Inline label​

Floating label​

Textarea floating label

Validation​

Password visibilty toggle​

Accessibility matters!

Change eye icon​

Sizes​

Colors​

Customization​

Style every input differently!

Label

Inline label

Floating label

Validation

Password visibilty toggle

Change eye icon

Sizes

Colors

Customization