Catalog Layouts

<.disableable>

ConnieUI.Layouts

HEEx 
<div class="w-md">
  <ConnieUI.Layouts.disableable>
    <ConnieUI.Layouts.vstack gap="sm">
      <ConnieUI.Forms.toggle field={@form[:reminders]}>Send reminders</ConnieUI.Forms.toggle>
      <ConnieUI.Buttons.button size="sm" color="secondary">Edit schedule</ConnieUI.Buttons.button>
    </ConnieUI.Layouts.vstack>
  </ConnieUI.Layouts.disableable>
</div>

Variant matrix

Every combination of one or two attributes, side by side.

Controls

Set by the example

class

Docs

A region that stays on screen while it is switched off: faded, and every control in it disabled. A `<fieldset disabled>`, so the browser does the disabling: every button and input inside stops responding and drops out of the tab order, and a screen reader still reads the content and hears each control as unavailable, which `inert` would not give it. `disabled={false}` renders the same element with nothing applied, so a caller switches the state rather than the markup.
Attribute Type Default Description
disabled :boolean true
class :any nil
rest :global
Slot Slot attributes Description
inner_block *