# HTML & CSS Styling {% hint style="info" %} These CSS classes are available on Homey Cloud, and on Homey Pro since v8.1.0 {% endhint %} ## Header and Titles For custom pairing screens and app settings you might want to use our default header with title and an optional subtitle.
CSS classHTML
.homey-header
<header class="homey-header"></header>
.homey-title
<h1 class="homey-title"></h1>
.homey-subtitle
<p class="homey-subtitle"></p>
#### Example

By using the homey-header class you create spacing and a line between your settings and title(s).

{% code lineNumbers="true" %} ```html

``` {% endcode %} ## Forms Start a new form by using the `homey-form` CSS class.
CSS classHTML
.homey-form
<form class="homey-form"></form>
#### Example ```html
``` ### Fieldset and legend With `
` you can create a new fieldset in your form.\ A fieldset is useful to create larger sections in your forms. Make sure your always use a `` to give the fieldset a title.
CSS classHTML
.homey-form-fieldset
<fieldset class="homey-form-fieldset"></fieldset>
.homey-form-legend
<legend class="homey-form-legend"></legend>
#### Example

Use a homey-form-legend to create headings between form elements.

{% code lineNumbers="true" %} ```html
``` {% endcode %} ### Groups Use `
` to create a group combining a label with an input field. Use the `homey-form-group` class to create equal vertical spacing between all inputs.
CSS classHTML
.homey-form-group
<div class="homey-form-group"></div>
#### Example

The yellow space marks the spacing above and below each .homey-form-group class

<div class="homey-form-group">
  <label class="homey-form-label" for="target">label</label>
  <input class="homey-form-input" id="target" type="text" value=""/>
</div>
### Basic input & label
CSS classHTML
.homey-form-label
<label class="homey-form-label" for="target"></label>
.homey-form-input
<input class="homey-form-input" id="target" type="text" value=""/>
Can be used for the input types: text, number, password and url .
#### Example

Basic label + input example

<form class="homey-form">
  <fieldset class="homey-form-fieldset">
    <legend class="homey-form-legend">Login data</legend>

    <div class="homey-form-group">
      <label class="homey-form-label" for="username">Username</label>
      <input class="homey-form-input" id="username" type="text" value=""/>
    </div>
    <div class="homey-form-group">
      <label class="homey-form-label" for="password">Password</label>
      <input class="homey-form-input" id="password" type="password" value=""/>
    </div>
    <!-- ... -->
### Radio input #### Radio set
CSS classHTML
.homey-form-radio-set
<fieldset class="homey-form-radio-set"></fieldset>
.homey-form-radio-set-title
<legend class="homey-form-radio-set-title"></legend>
#### Radio buttons
CSS classHTML
.homey-form-radio
<label class="homey-form-radio"></label>
.homey-form-radio-input
<input class="homey-form-radio-input"></input>
.homey-form-radio-checkmark
<span class="homey-form-radio-checkmark"></span>
.homey-form-radio-text
<span class="homey-form-radio-text"></span>
#### Example

Radio buttons should be grouped in fieldsets. You can use multiple levels of fieldsets with different classes.

{% code lineNumbers="true" %} ```html
Multiple choice questions
Group of radio buttons
``` {% endcode %} ### Checkbox input #### Checkbox set
CSS classHTML
.homey-form-checkbox-set
<fieldset class="homey-form-checkbox-set"></fieldset>
.homey-form-checkbox-set-title
<legend class="homey-form-radio-checkbox-set-title"></legend>
#### Checkboxes
CSS classHTML
.homey-form-checkbox
<label class="homey-form-checkbox"></label>
.homey-form-checkbox-input
<input class="homey-form-checkbox-input"></input>
.homey-form-checkbox-checkmark
<span class="homey-form-checkbox-checkmark"></span>
.homey-form-checkbox-text
<span class="homey-form-checkbox-text"></span>
#### Example
{% code lineNumbers="true" %} ```html
Group of checkbox buttons
``` {% endcode %} ### Select
CSS classHTML
.homey-form-select
<select class="homey-form-select">
  <option value="1">Option 1</option>
</select>
#### Example
{% code lineNumbers="true" %} ```html
``` {% endcode %} ### Textarea
CSS classHTML
.homey-form-textarea
<textarea class="homey-form-textarea"></textarea>
#### Example
{% code lineNumbers="true" %} ```html
``` {% endcode %} ## Buttons ### Button variants {% hint style="info" %} **Using multiple button variants:**\ Each button class starts with `.homey-button` this you can follow up with *color variants* such as: `-primary` ,`-secondary`, `-danger`. You can further adjust the button style by adding `-full`, `-shadow`, `-small` parameters. This way you end up having a class such as `.homey-button-primary-shadow-full`. {% endhint %}
CSS classHTML
.homey-button-primary
<button class="homey-button-primary"></button>
.homey-button-primary-full
<button class="homey-button-primary-full"></button>
.homey-button-primary-shadow
<button class="homey-button-primary-shadow"></button>
.homey-button-primary-shadow-full
<button class="homey-button-primary-shadow-full"></button>
.homey-button-transparent
<button class="homey-button-transparent"></button>

v8.1.1

.homey-button-secondary-shadow

<button class="homey-button-secondary-shadow"></button>

v8.1.1

.homey-button-danger-shadow

<button class="homey-button-danger-shadow"></button>

v8.1.1

.homey-button-small

<button class="homey-button-small"></button>
#### Example

.homey-button-primary-full

.homey-button-secondary-shadow

.homey-button-danger-shadow

### ### Disabled state
CSS classHTML
.homey-button-{variant}.is-disabled
<button class="homey-button-primary is-disabled"></button>
.homey-button-{variant}[disabled=disabled]
<button class="homey-button-primary" disabled="disabled"></button>
#### Example

.homey-button-primary-full.is-disabled

### Loading state
CSS classHTML
.homey-button-primary-{variant}.is-loading
<button class="homey-button-primary-full is-loading"></button>
#### Example

.homey-button-primary-full.is-loading

## Right-to-Left (RTL) Styling Homey supports Right-to-Left (RTL) layouts for languages such as Arabic. RTL layout direction is handled automatically by Homey, but custom views may require additional styling to ensure the interface remains clear and consistent in RTL contexts. When styling custom views, keep RTL in mind from the start to avoid layout issues. ### Recommended practices Use direction-aware CSS wherever possible so your styles work in both Left-to-Right (LTR) and Right-to-Left (RTL) layouts. For general information about RTL support and language localization, see [Internationalization](https://apps.developer.homey.app/the-basics/app/internationalization#right-to-left-rtl-and-arabic-language-support). #### **Prefer logical properties over left/right** Logical properties automatically adapt to the active text direction. ```css /* Preferred */ padding-inline-start: 16px; padding-inline-end: 16px; margin-inline-start: 8px; /* Avoid */ padding-left: 16px; padding-right: 16px; margin-left: 8px; ``` #### **Use direction-aware text alignment** ```css text-align: start; ``` Avoid hard-coding left or right unless absolutely necessary. #### **Use :dir(rtl)for direction-specific adjustments** Some visuals are inherently directional and may require explicit RTL handling. ```css .chevron:dir(rtl) { transform: scaleX(-1); } ``` Common cases include: * arrows and chevrons * animations and transitions * progress indicators * absolute positioning **Be careful with absolute positioning** If possible, use logical positioning properties: ```css inset-inline-start: 0; ``` Only fall back to left / right with a :dir(rtl) override when needed.