Form Elements (Custom)

Form File

Nest <input class="form-file-input" type="file"> inside form-file to create a variety of custom file inputs. The element with the form-file class should wrap whatever element you want to trigger the operating system's file browser.

Form File needs custom javascript to change the input value to the file selected.

Simple File Upload

Attach File

Browse

Attach File

Custom Checkbox

Unchecked

Checked

Indeterminate

Unchecked Disabled

Checked Disabled

Indeterminate Disabled

Custom Radio

Toggle this custom radio

Or toggle this other custom radio

Custom Controls Inline

Toggle this custom radio

Or toggle this other custom radio

Custom Control Primary

Add custom-control-primary to a custom-control to increase the visual hierarchy (makes text bold) of a custom-control? See https://github.com/liferay/clay/issues/2813

Unchecked

Toggle this custom radio

Or toggle this other custom radio

Custom Select

It's recommended to use select.form-control instead. This is only here for documentation purposes.

Custom File

It's recommended to use .form-file instead. This is here only for documentation purposes. To get custom-file-control styles to display, you'll need to add lang="en" to the html element or set the Content-Language HTTP header.

Choose File