Unleash your potential

Go one step further with our solutions for creating an intuitive, personalized experience.

Haltura

Create libraries without coding.

Spartiapp

Create beautiful websites.
Log In
Alpha
Docs Creations Contact

Introduction

IntroductionInstallationBreakpoints

Components

AccordionAlertAutocompleteAvatarBadgeButtonCardCheckboxDividerDropdownFieldLayoutModalNavigationRadioSheetSkeletonSliderSnackbarSpinnerTableTabTooltipTypography

Utilities

ColorDisplayFlexboxOpacityPositionRadiusSizingSpacingTextVertical align

APIs

HalturaCookiesFrontierTour
Docs / web / field

Field

Fields are one of the most used elements. It is important to style them well to improve the experience.

Initializing the component.

Use the h_field class to create a Field component.

field
<div class="h_field">
    <label>Label</label>
    <input type="text"/>
</div>

Many fields can be adapted with the h_field class.

field
<div class="h_field">
    <label>Label</label>
    <input type="text" value="text">
</div>
<div class="h_field">
    <label>Label</label>
    <input type="password" value="password">
</div>
<div class="h_field">
    <label>Label</label>
    <input type="number" value="42">
</div>
<div class="h_field">
    <label>Label</label>
    <input type="date" value="2021-04-28">
</div>
<div class="h_field">
    <label>Label</label>
    <select>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field">
    <label>Label</label>
    <select multiple>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field">
    <label>Label</label>
    <input type="range" />
</div>
<div class="h_field">
    <label>Label</label>
    <input type="file" data-label="Browse image" />
</div>
<div class="h_field">
    <label>Label</label>
    <input type="file" data-label="Browse multiple image" multiple />
</div>

The components adapt to the disabled attribute.

field
<div class="h_field">
    <label>Label</label>
    <input disabled type="text" value="text">
</div>
<div class="h_field">
    <label>Label</label>
    <input disabled type="password" value="password">
</div>
<div class="h_field">
    <label>Label</label>
    <input disabled type="number" value="42">
</div>
<div class="h_field">
    <label>Label</label>
    <input disabled type="date" value="2021-04-28">
</div>
<div class="h_field">
    <label>Label</label>
    <select disabled>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field">
    <label>Label</label>
    <select multiple disabled>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field">
    <label>Label</label>
    <input disabled type="range" />
</div>
<div class="h_field">
    <label>Label</label>
    <input type="file" disabled data-label="Browse image" />
</div>
<div class="h_field">
    <label>Label</label>
    <input type="file" disabled data-label="Browse multiple image" multiple />
</div>

You can keep the native behavior of components with the native class.

field
<div class="h_field native">
    <label>Label</label>
    <select multiple>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field native">
    <label>Label</label>
    <input type="range">
</div>

Some components exist as variants.

field
<div class="h_field">
    <label>Label</label>
    <input type="range">
</div>
<div class="h_field accent">
    <label>Label</label>
    <input type="range">
</div>
<div class="h_field danger">
    <label>Label</label>
    <input type="range">
</div>
field
<div class="h_field">
    <label>Label</label>
    <input type="text" value="text">
</div>
<div class="h_field">
    <label>Label</label>
    <input type="password" value="password">
</div>
<div class="h_field">
    <label>Label</label>
    <input type="number" value="42">
</div>
<div class="h_field">
    <label>Label</label>
    <input type="date" value="2021-04-28">
</div>
<div class="h_field">
    <label>Label</label>
    <select>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field">
    <label>Label</label>
    <select multiple>
        <option value="0">Option 1</option>
        <option value="1">Option 2</option>
        <option value="2">Option 3</option>
    </select>
</div>
<div class="h_field">
    <label>Label</label>
    <input type="range" />
</div>
<div class="h_field">
    <label>Label</label>
    <input type="file" data-label="Browse image" />
</div>
<div class="h_field">
    <label>Label</label>
    <input type="file" data-label="Browse multiple image" multiple />
</div>
Class Definition
h_field Create a Field component.
native Create a native component.
accent Add accent style.
danger Add danger style.
Hello!

Haltura wants to provide you with an efficient experience by implementing cookies! Cookies are small files that help us to understand you better and to ensure the proper functioning of our technologies. You have the right to manage them as you wish!

Cookie settings

Important (Can't be disabled)