Forms
Form inputs have been considered from an accessibility and user experience point of view. These inputs deliver the best solution for inputting and focusing on elements. They also provide clear, visual user feedback as a form is traversed or submitted. Each input has a transparent background and we recommend form inputs are used only on a solid background of ‘Brand3’ or ‘Brand4’. Standard inputs include an inline label in the text field but can also be used with the label above the input field where needed e.g. above a radio list. The focus state of each label would remain in each case for consistent visual feedback. Labels can be shown or hidden as required. All forms contain space for entering information, labels, in form icons and feedback messages below. Form inputs can appear on their own row (stacked) or they can be put side by side with other relevant fields, when space is available. 16px of margin between both field input/label blocks is required.
Utility classes
-
rc-input--full-width- Disables the fixed max width and allows the input to fill its parent. -
rc-select-group- Adds flexbox layout to sibling selects to improve how selects sit next to each other. -
rc-input--label- Adds a top margin when a transition label is needed. -
rc-margin-*--*- Our spacing utility classes can also be used to fine tune margins to suit your needs. -
rc-fieldset- Resets default margin, padding and border properties. -
rc-form-wrapper--two-columns- Adds maximum width for two-column form. -
rc-content-h-bottom- Ensure that inputs are correctly vertical aligned. -
rc-select-group- Wraps multiple, select inputs. -
rc-input--inline-container- Wraps more than two inline inputs, ensure correct styling.
Form layout
Text
Initially an input will have placeholder copy with a colour of ‘Text’ at 50% opacity and a 2px bottom border of ‘Interface’ with a colour of ‘Interface’. On clicking into the input, placeholder copy will become 100% opacity and the bottom border will transition from left to right in colour to a colour of ‘Text’, darkening the border and placeholder copy giving the element more emphasis. The transition will use our global transition property.
On entering information into the input, the font-weight will transition from Medium to Regular and the placeholder copy will seamlessly transition to be above the input with a weight of Medium, this gives contrasting weights between our consistently visible placeholder copy and our users entered information.'
<span class="rc-input rc-input--inline rc-input--label">
<input class="rc-input__control" id="id-text2" type="text" name="text" />
<label class="rc-input__label" for="id-text2">
<span class="rc-input__label-text">Text input</span>
</label>
</span>Copied!
Text (with prefix)
Some input values may require a prefix adding to the input to denote units (eg. "£"). Prefixes can be added as span elements. Use rc-input__unit class for the unit element and a rc-input--prefix modifier class on the parent element for layout.
<span class="rc-input rc-input--inline rc-input--label">
<input class="rc-input__control" id="id-textprefix" type="text" name="text" data-prefix="£" />
<label class="rc-input__label" for="id-textprefix">
<span class="rc-input__label-text">Text input</span>
</label>
</span>Copied!
Text (with suffix)
Some input values may require a suffix adding to the input to denote units (eg. "cm"). Suffixes can be added as span elements. Use rc-input__unit class for the unit element and a rc-input--prefix modifier class on the parent element for layout.
<span class="rc-input rc-input--inline rc-input--label">
<input class="rc-input__control" id="id-textsuffix" type="text" name="text" data-suffix="cm" />
<label class="rc-input__label" for="id-textsuffix">
<span class="rc-input__label-text">Text input</span>
</label>
</span>Copied!
Inline inputs
Inputs can be inlined using rc-input--inline, and aligned horizontally using rc-input--label depending on whether the input has a label or not. Note: if option is really long, add data-title custom attribute to it. This will create native title/tooltip option on hover state.
<div class="rc-input--inline-container">
<span class="rc-input rc-input--inline rc-input--label rc-margin-bottom--md--mobile rc-margin-bottom--sm--desktop">
<input class="rc-input__control" id="id-text1" name="text" type="text" />
<label class="rc-input__label" for="id-text1">
<span class="rc-input__label-text">Text input</span>
</label>
</span>
<span class="rc-select rc-input--inline rc-input--label rc-margin-bottom--md--mobile rc-margin-bottom--sm--desktop">
<label class="rc-select__label" for="id-single-select">I am interested in</label>
<select data-js-select="" id="id-single-select">
<option value="" disabled="" selected="">Select an option</option>
<option disabled="">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option>Option 4</option>
<option>Option 5</option>
<option data-title="Option 6 - that is example of really long option to select">Option 6 - that is example of really long option to select</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</select>
</span>
<span class="rc-input rc-input--inline rc-input--label rc-margin-bottom--md--mobile rc-margin-bottom--sm--desktop">
<input class="rc-input__date" id="id-date" data-js-dateformat="DD/MM/YYYY" name="example-date-input" type="date" />
<label class="rc-input__label" for="id-date">
<span class="rc-input__label-text">Date</span>
</label>
</span>
</div>Copied!
Success
Indicating successful and unsuccessful entry of a field is important to make sure users can complete our forms as quickly as possible. Inputs are styled in the following ways to give a visual indication which fields may or may not need addressing.
Successfully completed fields are indicated by our border transitioning to the ‘Success’ colour and also use a right-aligned xs icon of feedback--success which is also shaded in the ‘Success’ colour.
<span class="rc-input rc-input--success" data-js-validate="" data-js-warning-message="Success message">
<input class="rc-input__control" id="id-text3" type="text" name="text" />
<label class="rc-input__label" for="id-text3">
<span class="rc-input__label-text">Success input</span>
</label>
</span>Copied!
Warning
This states give users important feedback that certain criteria must be met but that an error has not yet occured. It uses the ‘Warning’ colour. This is particularly useful for form elements such as email and passwords where validation criteria may be required. It is recommended that warning states include a short descriptor to assist and give users clarity. This should be used to display that criteria have not yet been met, but where the user has not yet completed the input fields, clicked out of the field or attempted to submit the form information.
<span class="rc-input rc-input--warning" data-js-validate="" data-js-warning-message="Warning message">
<input class="rc-input__control" id="id-text4" type="text" name="text" />
<label class="rc-input__label" for="id-text4">
<span class="rc-input__label-text">Warning input</span>
</label>
</span>Copied!
Error
Incorrectly completed fields are indicated by our border transitioning to the ‘Error’ colour and also use a right-aligned 16px icon of warning which is also shaded in the ‘Error’ colour. Error states can be used on all mandatory form elements when a form is submitted and information has not been provided in a mandatory field.
<span class="rc-input rc-input--error" data-js-validate="" data-js-warning-message="Error message">
<input class="rc-input__control" id="id-text6" type="text" name="text" />
<label class="rc-input__label" for="id-text6">
<span class="rc-input__label-text">Error input</span>
</label>
</span>Copied!
Optional
Form fields by their nature should be used where information is required. Ideally no indication of a field being mandatory will ever need to be required. Forms should only provide fields that a user needs to complete to progress. If other inputs are offered to a user as part of a larger form we would prefer to indicate which inputs are optional fields rather than indicate that everything else is mandatory on the form.
<span class="rc-input">
<input class="rc-input__control" id="id-text7" type="text" name="text" optional="" />
<label class="rc-input__label" for="id-text7">
<span class="rc-input__label-text">Input (optional)</span>
</label>
</span>Copied!
Disabled
Disabled inputs may be required for fields that cannot have their information changed or are locked until another action is completed, before they become editable. Disabled inputs follow the same style as a standard input apart from they have ‘Interface’ as a background colour and have an attribute of disabled="" on their markup.
<span class="rc-input">
<input class="rc-input__control" id="id-text8" type="text" name="text" disabled="" />
<label class="rc-input__label" for="id-text8">
<span class="rc-input__label-text">Input text</span>
</label>
</span>Copied!
An email field demonstrates well the various errors that may be used for form validation.
<span class="rc-input" data-js-validate="" data-js-warning-message="Please enter a valid email">
<input class="rc-input__control" id="id-email" type="email" name="email" />
<label class="rc-input__label" for="id-email">
<span class="rc-input__label-text">Email input</span>
</label>
</span>Copied!
Search
Search fields use the same Dimensions properties as a normal text field for icon position but at the start of an input rather than at the end (such as a Success input). This is because traditionally a search bar uses a search icon to the left of the entered information. All other rules around a search field are the same as a default text field.
<span class="rc-input">
<button class="rc-input__submit rc-input__submit--search" type="submit">
<span class="rc-screen-reader-text">Submit</span>
</button>
<input class="rc-input__control" id="id-submit-2" type="text" name="search" />
<label class="rc-input__label" for="id-submit-2">
<span class="rc-input__label-text">Search</span>
</label>
</span>Copied!
Micro form
For single field inputs they can be combined with an Action Button to create a Micro Form. Micro Forms are for when there is simply one main task to complete on a page or application, such as searching for a supplier or entering a discount code. When Micro forms are used all rules around standard inputs still apply.
<span class="rc-input">
<input class="rc-input__control rc-input--micro" id="id-submit2" type="text" name="email" />
<label class="rc-input__label" for="id-submit2">
<span class="rc-input__label-text">Submit</span>
</label>
<button class="rc-input__submit rc-input__submit--micro" type="submit">
<span class="rc-screen-reader-text">Submit</span>
</button>
</span>Copied!
Password
Password fields have two distinct states, one for hiding the password (default) and a toggle option for a user to easily see their password once they have entered it.
This password field follows the same rules as Success and Failure inputs for the positioning of their iconography with the distinct difference of the View icon sitting outside of the input due it needing its own clickable hit area due to being a toggle between the two states. Icon toggles switch from a colour of ‘Iconography’ to ‘Brand1’ on click/touch.
<span class="rc-input rc-input--inline" data-js-warning-message="Must be at least X characters" data-js-validate="">
<input class="rc-input__password" id="id-password" type="password" name="password" data-js-match="id-password-2" />
<label class="rc-input__label" for="id-password">
<span class="rc-input__label-text">Your password</span>
</label>
</span>
<span class="rc-input rc-input--inline" data-js-error-message="Passwords do not match" data-js-success-message="Passwords match" data-js-validate="">
<input class="rc-input__password" id="id-password-2" type="password" name="password" />
<label class="rc-input__label" for="id-password-2">
<span class="rc-input__label-text">Confirm password</span>
</label>
</span>Copied!
Textarea
Textareas follow all of the same rules and transitions surrounding focus and text entry from Text Fields but with a difference in how the borders are styled. We change from a bottom only border to an entirely surrounded border which helps to emphasise how large the textarea is for a user to enter information in.
<span class="rc-input">
<textarea class="rc-input__textarea" id="id-textarea"></textarea>
<label class="rc-input__label" for="id-textarea">
<span class="rc-input__label-text">Textarea</span>
</label>
</span>Copied!
Radio
Radio button lists are used when a user is required to pick one option from a small list. Radio buttons are custom styled with a ‘Brand1’ colour selected state.
Where possible the options should be listed in a logical order, such as most likely to be selected to least likely to be selected. Alphabetical ordering is not recommended because it is language dependent and therefore not localisable.
Options should be listed vertically, with one option per line whenever possible. Horizontal layouts can also be used to save space if only two to three options are required under the label. Users should be able to select an option by clicking or tapping the radio button, the text label or associated words.
<div class="rc-input rc-input--inline">
<input class="rc-input__radio" id="id-radio-cat" value="Cat" type="radio" name="radio-1" />
<label class="rc-input__label--inline" for="id-radio-cat">Cat</label>
</div>
<div class="rc-input rc-input--inline">
<input class="rc-input__radio" id="id-radio-dog" value="Dog" checked="" type="radio" name="radio-1" />
<label class="rc-input__label--inline" for="id-radio-dog">Dog</label>
</div>Copied!
<div class="rc-input rc-input--stacked">
<input class="rc-input__radio" id="id-radio-cat-2" value="Cat" type="radio" name="radio-2" />
<label class="rc-input__label--inline" for="id-radio-cat-2">Cat</label>
</div>
<div class="rc-input rc-input--stacked">
<input class="rc-input__radio" id="id-radio-dog-2" value="Dog" checked="" type="radio" name="radio-2" />
<label class="rc-input__label--inline" for="id-radio-dog-2">Dog</label>
</div>Copied!
<div class="rc-input rc-input--inline rc-input--inline--radio-box">
<input class="rc-input__radio rc-input__radio--box" id="id-radio-1kg" value="1kg" type="radio" name="radio-1-box" />
<label class="rc-input__label--inline" for="id-radio-1kg">1kg</label>
</div>
<div class="rc-input rc-input--inline rc-input--inline--radio-box">
<input class="rc-input__radio rc-input__radio--box" id="id-radio-2kg" value="2kg" checked="" type="radio" name="radio-1-box" disabled="" />
<label class="rc-input__label--inline" for="id-radio-2kg">2kg</label>
</div>
<div class="rc-input rc-input--inline rc-input--inline--radio-box">
<input class="rc-input__radio rc-input__radio--box" id="id-radio-14kg" value="13.5kg" checked="" type="radio" name="radio-1-box" />
<label class="rc-input__label--inline" for="id-radio-14kg">13.5kg</label>
</div>
<div class="rc-input rc-input--inline rc-input--inline--radio-box">
<input class="rc-input__radio rc-input__radio--box" id="id-radio-4kg" value="4kg" checked="" type="radio" name="radio-1-box" />
<label class="rc-input__label--inline" for="id-radio-4kg">4kg</label>
</div>
<div class="rc-input rc-input--inline rc-input--inline--radio-box">
<input class="rc-input__radio rc-input__radio--box" id="id-radio-5kg" value="5kg" checked="" type="radio" name="radio-1-box" />
<label class="rc-input__label--inline" for="id-radio-5kg">5kg</label>
</div>Copied!
Checkboxes
Checkboxes are used when the user may select any number of choices from a list, including zero, one, or several options. Checkboxes are custom styled with ‘icon--tick’ Iconography and are coloured in ‘Brand1’ in place of the browser default ticks. The rules around checkbox forms are the same as radio forms:
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="id-checkbox-cat" value="Cat" type="checkbox" name="checkbox-1" />
<label class="rc-input__label--inline" for="id-checkbox-cat">Cat</label>
</div>
<div class="rc-input rc-input--inline">
<input class="rc-input__checkbox" id="id-checkbox-dog" value="Dog" checked="" type="checkbox" name="checkbox-1" />
<label class="rc-input__label--inline" for="id-checkbox-dog">Dog</label>
</div>Copied!
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="id-checkbox-cat-2" value="Cat" type="checkbox" name="checkbox-2" />
<label class="rc-input__label--inline" for="id-checkbox-cat-2">Cat</label>
</div>
<div class="rc-input rc-input--stacked">
<input class="rc-input__checkbox" id="id-checkbox-dog-2" value="Dog" checked="" type="checkbox" name="checkbox-2" />
<label class="rc-input__label--inline" for="id-checkbox-dog-2">Dog</label>
</div>Copied!
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-adaptable" value="Adaptable" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-adaptable">Adaptable</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-agile" value="Agile" checked="" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-agile">Agile</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-alert" value="Alert" checked="" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-alert">Alert</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-assertive" value="Assertive" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-assertive">Assertive</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-athletic" value="Athletic" checked="" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-athletic">Athletic</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-calm" value="Calm" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-calm">Calm</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-confident" value="Confident" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-confident">Confident</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-determined" value="Determined" checked="" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-determined">Determined</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-enthusiastic" value="Enthusiastic" checked="" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-enthusiastic">Enthusiastic</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-even-tempetered" value="Even-tempered" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-even-tempetered">Even-tempered</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-friendly" value="Friendly" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-friendly">Friendly</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-gentle" value="Gentle" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-gentle">Gentle</label>
</div>
<div class="rc-input rc-input--inline--checkbox-box">
<input class="rc-input__checkbox rc-input__checkbox--box" id="id-checkbox-dog-hard-working" value="Hard-working" checked="" type="checkbox" name="checkbox-3" />
<label class="rc-input__label--inline" for="id-checkbox-dog-hard-working">Hard-working</label>
</div>Copied!
Standard select
Selects are styled using the same rules defined for text fields regarding border and focus properties. Differences are that they have a right aligned Chevron-Down / Chevron-Up state when clicked which indicates the dropdown is open or closed. Icon Chevron-Down is used here to indicate the element is clickable.
On click of the select, the custom dropdown is revealed with our available options. The icon switches to Chevron-Up and uses a toggle state of ‘Brand1’. In the above example, we showcase a hover state which is a background colour of ‘Brand4’ ’and the option selected by the user becomes apparent within the select area itself.
<span class="rc-select">
<label class="rc-select__label" for="id-single-select">I am interested in</label>
<select data-js-select="" id="id-single-select">
<option selected="" disabled="" value="">Select an option</option>
<option disabled="">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option data-custom="Some data">Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</select>
</span>Copied!
Custom standard select
Selects can be initialised with a custom selector and options object using the JavaScript below. This is useful for tailoring the selects to your specific use case.
For example: dynamically generating items, applying a custom sort filter, choosing alternative select text etc. Design Language selects utilise the Choices.js library and a full list of options and more in-depth documentation can be seen on their Github repository.
<span class="rc-select">
<label class="rc-select__label" for="id-single-select">I am interested in</label>
<select data-js-custom-select-single="" data-js-custom-placeholder="Please select..." id="id-single-select">
<option data-custom="Some data" selected="" disabled="" value="">Select an option</option>
<option disabled="">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option data-custom="Some data">Option 4</option>
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</select>
</span>Copied!
Multi Select
Multi-select dropdowns can be used when a user can select multiple options from a list of many. Icon Chevron-Down is used here to indicate the element is clickable.
On click of the select, the custom dropdown is revealed with our available options. Available options become greyed out at 50% opacity the more options are selected (Boxer in the above example). Selected options are indicated by a band in colour of ‘Text’ with a copy colour of ‘Brand3’; they are also indicated by a tick icon indicated to a user they have selected this option and as many more as are available to them.
<span class="rc-select">
<label class="rc-select__label" for="id-multi-select">I am interested in</label>
<select data-js-select="" multiple="" data-custom-attr="Custom" data-js-select-placeholder="Please select..." id="id-multi-select">
<optgroup label="Option Group">
<option disabled="">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option data-custom="Some data">Option 4</option>
</optgroup>
<optgroup label="Option Group">
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</optgroup>
</select>
</span>Copied!
Custom multi select
Multi selects can be initialised with a custom selector and options object using the JavaScript below. This is useful for tailoring the selects to your specific use case.
For example: dynamically generating items, applying a custom sort filter, choosing alternative select text etc. Design Language selects utilise the Choices.js library and a full list of options and more in-depth documentation can be seen on their Github repository. To insert a value from a data attribute, simply refer to that attribute in your options.
const multiOptions = {
placeholderValue: 'data-js-custom-placeholder',
shouldSort: false,
searchEnabled: true,
itemSelectText: 'Custom',
classNames: {
item: 'choices__item choices__item--custom-data'
}
};
RCDL.features.Selects.init('[data-js-custom-select]', null, multiOptions);
<span class="rc-select">
<label class="rc-select__label" for="id-multi-select">I am interested in</label>
<select data-js-custom-select-multiple="" multiple="" data-js-custom-placeholder="Please select..." id="id-multi-select">
<optgroup label="Option Group">
<option disabled="">Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
<option data-custom="Some data">Option 4</option>
</optgroup>
<optgroup label="Option Group">
<option>Option 5</option>
<option>Option 6</option>
<option>Option 7</option>
<option>Option 8</option>
<option>Option 9</option>
</optgroup>
</select>
</span>Copied!
Date
A date picker is used to easily traverse days, years and months. For the scenario when a pet owner may not know the exact date of birth of their pet a checkbox should be used which swaps the date picker to an inactive state and presents the user with a select year field. The assumption here is that if the user knows the month and year they can use the standard date picker, choosing any specific day of the month. Where the date is not a mandatory the input label should read (optional).
<span class="rc-input">
<input class="rc-input__date" id="id-date-2" type="date" name="example-date-input" />
<label class="rc-input__label" for="id-date-2">
<span class="rc-input__label-text">Date</span>
</label>
</span>Copied!
Custom date
There might be a scenario to insert custom configuration for the date picker. For example, changing name of months or days to a different language.
For list of all custom options, go to Pikaday github repository.
To add custom options, you need to add class .rc-js-custom and data attribute data-rc-js-disable. That will turn off automatic initialization of the feature.
After that run datepicker plugin manually. In this example we are changing months and days to Polish language.
const datePickerOptions = {
i18n: {
previousMonth: 'Poprzedni miesiąc',
nextMonth: 'Następny miesiąc',
months: ['Styczeń', 'Luty', 'Marzec', 'Kwiecień', 'Maj', 'Czerwiec', 'Lipiec', 'Sierpień', 'Wrzesień', 'Październik', 'Listopad', 'Grudzień'],
weekdays: ['Niedziela', 'Poniedziałek', 'Wtorek', 'Środa', 'Czwaretk', 'Piątek', 'Sobota'],
weekdaysShort: ['Nd', 'Pon', 'Wt', 'Śr', 'Czw', 'Pt', 'Sb']
}
};
RCDL.features.Datepickers.init('.rc-input__date.rc-js-custom', null, datePickerOptions);
<span class="rc-input">
<input class="rc-input__date rc-js-custom" id="id-date-2" type="date" name="example-date-input" data-rc-js-disable="true" />
<label class="rc-input__label" for="id-date-2">
<span class="rc-input__label-text">Date</span>
</label>
</span>Copied!
Number
<span class="rc-input">
<input class="rc-input__control" id="id-number" type="number" name="number" />
<label class="rc-input__label" for="id-number">
<span class="rc-input__label-text">Number</span>
</label>
</span>Copied!
Number picker
The Number picker input is used to quickly increase or decrease the quantity or input a specific amount.
If there is a maximum or minimum amount set and the current input value is equal to it, the relevant button would be disabled, indicating to the user that they are unable to add or subtract from the input value. (For example if the minimum amount is set to 0 and the input is also at 0 then the minus button will be disabled. It would only be enabled once the input amount has been increased.) Maximum and minimum amounts can be set via the aria-valuemax and aria-valuemin attributes on the input element.
The number indicated in the middle of the Number Picker component is also a form input and allows a user to type within the input and hit Enter/Go to quickly select that amount. If a user enters an amount that is higher or lower than the set maximum or minimum amounts the value of the input will be set to the maximum or minimum amount depending on which is closer.
The increment amount can also be altered by changing the data-step attribute on the input, this is the amount that will be added or subtracted from the input value when the plus or minus buttons are clicked.
<span class="rc-input rc-input__number-picker-wrapper" data-number-picker="" data-js-validate="" data-js-warning-message="Number must be between 0 and 10" data-js-buttons="["remove","add"]">
<input class="rc-input__number-picker rc-margin-x--xs" id="number-picker" name="number-picker" value="0" data-step="1" min="0" max="10" aria-valuenow="0" aria-valuemax="10" aria-valuemin="0" role="number picker" type="number" />
<label class="rc-input__label" for="number-picker">
<span class="rc-input__label-text">Quantity</span>
</label>
</span>Copied!
Number picker without buttons
<span class="rc-input rc-input__number-picker-wrapper" data-number-picker="" data-js-validate="" data-js-warning-message="Number must be between 0 and 16">
<input class="rc-input__number-picker" id="number-picker-2" name="number-picker" value="0" data-step="1" min="0" max="16" aria-valuenow="0" aria-valuemax="16" aria-valuemin="0" role="number picker" type="number" />
<label class="rc-input__label" for="number-picker-2">
<span class="rc-input__label-text">Quantity</span>
</label>
</span>Copied!
Telephone
An input that validates telephone numbers, it checks that characters are numbers and tests the input string against a regular expression (Regex) pattern.
The warning message can be altered via the data-js-warning-message attribute and the Regex can be specified in the data-js-pattern attribute. (For example the Regex provided here checks for UK phone numbers.)
<span class="rc-input" data-js-validate="" data-js-warning-message="Telephone number isn’t valid">
<input class="rc-input__control" id="id-tel" data-js-pattern="(?:(\+44|0)[0-9]{9,10}$)" type="tel" name="tel" />
<label class="rc-input__label" for="id-tel">
<span class="rc-input__label-text">Telephone</span>
</label>
</span>Copied!
URL
<span class="rc-input">
<input class="rc-input__control" id="id-url" type="url" name="url" />
<label class="rc-input__label" for="id-url">
<span class="rc-input__label-text">URL</span>
</label>
</span>Copied!