HTML & CSS Styling
The Homey Style Library is the key to a consistent user experience across all Homey Apps. We recommend to use this library above custom styling.
Header and Titles
For custom pairing screens and app settings you might want to use our default header with title and an optional subtitle.
.homey-header
<header class="homey-header"></header>
.homey-title
<h1 class="homey-title"></h1>
.homey-subtitle
<p class="homey-subtitle"></p>
Example

homey-header
class you create spacing and a line between your settings and title(s).<header class="homey-header">
<h1 class="homey-title" data-i18n="settings.title">
<!-- This will be filled with the translated string with key 'settings.title'. -->
</h1>
<p class="homey-subtitle" data-i18n="settings.subtitle">
<!-- This will be filled with the translated string with key 'settings.subtitle'. -->
</p>
</header>
Forms
Start a new form by using the homey-form
CSS class.
.homey-form
<form class="homey-form"></form>
Example
<form class="homey-form">
<!-- Your form html here -->
</form>
Fieldset and legend
With <fieldset class="homey-form-fieldset">
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 <legend class="homey-form-legend">
to give the fieldset a title.
.homey-form-fieldset
<fieldset class="homey-form-fieldset"></fieldset>
.homey-form-legend
<legend class="homey-form-legend"></legend>
Example

homey-form-legend
to create headings between form elements.<fieldset class="homey-form-fieldset">
<legend class="homey-form-legend"></legend>
<!-- ... -->
</fieldset>
Groups
Use <div class="homey-form-group">
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.
.homey-form-group
<div class="homey-form-group"></div>
Example

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

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

<form class="homey-form">
<!-- ... -->
<fieldset class="homey-form-fieldset">
<legend class="homey-form-legend">Multiple choice questions</legend>
<div class="homey-form-group">
<fieldset class="homey-form-radio-set">
<legend class="homey-form-radio-set-title">Group of radio buttons</legend>
<label class="homey-form-radio">
<input class="homey-form-radio-input" type="radio" name="radio-example"/>
<span class="homey-form-radio-checkmark"></span>
<span class="homey-form-radio-text">Radio label 1</span>
</label>
<label class="homey-form-radio">
<input class="homey-form-radio-input" type="radio" name="radio-example"/>
<span class="homey-form-radio-checkmark"></span>
<span class="homey-form-radio-text">Radio label 2</span>
</label>
<label class="homey-form-radio">
<input class="homey-form-radio-input" type="radio" name="radio-example"/>
<span class="homey-form-radio-checkmark"></span>
<span class="homey-form-radio-text">Radio label 3</span>
</label>
</fieldset>
</div>
<!-- ... -->
Checkbox input
Checkbox set
.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
.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

<div class="homey-form-group">
<fieldset class="homey-form-checkbox-set">
<legend class="homey-form-checkbox-set-title">Group of checkbox buttons</legend>
<label class="homey-form-checkbox">
<input class="homey-form-checkbox-input" type="checkbox" name="checkbox-example"/>
<span class="homey-form-checkbox-checkmark"></span>
<span class="homey-form-checkbox-text">Checkbox label 1</span>
</label>
<label class="homey-form-checkbox">
<input class="homey-form-checkbox-input" type="checkbox" name="checkbox-example"/>
<span class="homey-form-checkbox-checkmark"></span>
<span class="homey-form-checkbox-text">Checkbox label 2</span>
</label>
<label class="homey-form-checkbox">
<input class="homey-form-checkbox-input" type="checkbox" name="checkbox-example"/>
<span class="homey-form-checkbox-checkmark"></span>
<span class="homey-form-checkbox-text">Checkbox label 3</span>
</label>
</fieldset>
</div>
Select
.homey-form-select
<select class="homey-form-select">
<option value="1">Option 1</option>
</select>
Example

<div class="homey-form-group">
<label class="homey-form-label" for="select-example">Select your option</label>
<select class="homey-form-select" name="select-example" id="select-example">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</div>
Textarea
.homey-form-textarea
<textarea class="homey-form-textarea"></textarea>
Example

<div class="homey-form-group">
<label for="textarea-example-1" class="homey-form-label">Label for textarea</label>
<textarea class="homey-form-textarea" name="textarea-example-1" id="textarea-example-1" rows="10"
placeholder="type here your text"></textarea>
</div>
Buttons
Button variants
.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
.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
.homey-button-primary-{variant}.is-loading
<button class="homey-button-primary-full is-loading"></button>
Example

.homey-button-primary-full.is-loading
Last updated
Was this helpful?