Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<div class="p-8 max-w-xl">
  <div class="midwest-rich-text midwest-form-group type-rich-text has-error theme-red">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="body-e020">
        Body
      </label>
    </div>
    <input type="hidden" name="body" id="trix_input_7" autocomplete="off" /><trix-editor id="body-e020" data-midwest-rich-text-target="editor" data-direct-upload-url="https://midwest.unabridged-staging.com/rails/active_storage/direct_uploads" data-blob-url-template="https://midwest.unabridged-staging.com/rails/active_storage/blobs/redirect/:signed_id/:filename" input="trix_input_7" class="trix-content"></trix-editor>
    <div class="midwest-form-group__bottom theme-red">
      <span class="midwest-label description error">
        <div class="midwest-icon " aria-hidden="true">
          <div class="midwest-icon-inner">
            <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Warning"><title>Warning</title>
              <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
          </div>
        </div>
        Body can't be blank
      </span>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
<div class="p-8 max-w-xl">
  <%= midwest_form_rich_text(
        name: 'body',
        label: 'Body',
        error: "Body can't be blank"
      ) %>
</div>

Error

Passing error: themes the field red and renders the message below it.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Rich Text/error

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."