Radio

Radios are used when there are multiple options but the limit is one, users can choose to have one of them. FlatifyCSS has its customized radio with is pretty simple, just wrap your radio with .radio-wrapper class and add <span class="check"></span> after your input radio inside wrapper.

Validation

There are .valid, .warning and .invalid classes for validation. You can add them to .radio-wrapper.

index.html

<label class="radio-wrapper">
  <input disabled type="radio" name="choices" />
  <span class="check"></span>
  Choice 1
</label>

<label class="radio-wrapper">
  <input type="radio" checked name="choices" />
  <span class="check"></span>
  Choice 2
</label>

<label class="radio-wrapper">
  <input type="radio" name="choices" />
  <span class="check"></span>
  Choice 3
</label>

Sizes

To change the radio 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. Do not forget to add class to the wrapper to change label size as well.

index.html

<label class="radio-wrapper size-xs">
  <input type="radio" name="choices" />
  <span class="check"></span>
  Choice 1
</label>

<label class="radio-wrapper size-md">
  <input type="radio" name="choices" />
  <span class="check"></span>
  Choice 2
</label>

<label class="radio-wrapper size-2x">
  <input type="radio" name="choices" />
  <span class="check"></span>
  Choice 3
</label>

<label class="radio-wrapper size-3x">
  <input type="radio" checked name="choices" />
  <span class="check"></span>
  Choice 4
</label>

Radio buttons

It is possible to change radios appearance similar to buttons, it is a bit different from custom radios also it is necessary to read about buttons, here is an example:

index.html

<input id="my-radio-button1" class="radio-button" type="radio" name="radio-button" />
<label for="my-radio-button1" class="button style-blue">Pizza</label>

<input id="my-radio-button2" class="radio-button" type="radio" name="radio-button" />
<label for="my-radio-button2" class="button style-red">Sushi</label>

<input id="my-radio-button3" class="radio-button" type="radio" name="radio-button" />
<label for="my-radio-button3" class="button style-green">Taco</label>

Customization

There are CSS variables for customizing radios:

--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

.radio-wrapper {
  --flatify__form-element-accent-color: #37bc9b;
  --flatify__form-element-bg-color: #ffce54;
  --flatify__form-element-txt-color: #434a54;
  --flatify__form-element-border-color: #e0c341;
  --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;
}