There is a newer version of Luda.

Let's go!


Prevent elements from responding to user actions.


The native readonly attribute is for form control only, it makes a form element not editable. But still focusable, and what’s worse, some browsers even show an editable text cursor.

The data-readonly attribute in Luda is for solving such problems. A form element has the data-readonly attribute is not focusable nor editable. And we can even use this attribute to prevent other elements from responding to user actions in some situations.

Let’s see the below examples.



<div class="fm fm-text" data-readonly>
  <input data-readonly placeholder="A readonly text field">

Use the data-readonly attribute to prevent the text field from being edited.

A disabled link

<a href="#" data-readonly>A disabled link</a>

Use the data-readonly attribute to disable the link.

Dynamic Control

In Luda, we use the [data-readonly] selector to detect readonly elements. If you want to remove the readonly state dynamically in Javascript, don’t remove the data-readonly attribute, set its value to false instead.

document.querySelector('#my-readonly-element').setAttribute('data-readonly', false)

Sass Variables

$opacity-disabled: $opacity-muted !default