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 flex flex-col gap-6">
  <div class="midwest-rich-text midwest-form-group type-rich-text">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="bio-d3d8">
        Bio
      </label>
    </div>
    <input type="hidden" name="bio" id="trix_input_4" autocomplete="off" /><trix-editor id="bio-d3d8" 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_4" class="trix-content"></trix-editor>
  </div>
  <div class="midwest-rich-text midwest-form-group type-rich-text">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="notes-d3e0">
        Notes
      </label>
      <span class="midwest-label description">
        Optional
      </span>
    </div>
    <input type="hidden" name="notes" id="trix_input_5" autocomplete="off" /><trix-editor id="notes-d3e0" 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_5" class="trix-content"></trix-editor>
  </div>
</div>
1
2
3
4
<div class="p-8 max-w-xl flex flex-col gap-6">
  <%= midwest_form_rich_text(name: 'bio', label: 'Bio') %>
  <%= midwest_form_rich_text(name: 'notes', label: 'Notes', optional: true) %>
</div>

With Label

A label sits above the editor. Add optional: true to annotate the field as optional, or required: true to mark it required.

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/with_label

Annotate a preview to embed its Figma design here:

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