Midwest Component Library v0.28.2

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
<div class="p-8 max-w-xl">
  <div class="midwest-rich-text midwest-form-group type-rich-text">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="playground_body-d408">
      </label>
    </div>
    <input type="hidden" name="playground_body" id="trix_input_6" autocomplete="off" /><trix-editor id="playground_body-d408" placeholder="Write something…" 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_6" class="trix-content"></trix-editor>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%
lbl = params[:label].presence
val = params[:value].presence
ph = params[:placeholder].presence || 'Write something…'
desc = params[:description].presence
err = params[:error].presence
is_optional = params[:optional] == true
is_disabled = params[:disabled] == true
%>
<div class="p-8 max-w-xl">
  <%= midwest_form_rich_text(
        name: 'playground_body',
        label: lbl,
        value: val,
        placeholder: ph,
        description: desc,
        error: err,
        optional: is_optional,
        disabled: is_disabled
      ) %>
</div>

Playground

Explore the component with live parameters.

Param Description Input

Field label

Initial HTML content

Placeholder text

Helper text below the editor

Error message (themes the field red)

Show 'Optional' annotation

Disable the editor

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

Accessibility

Figma embed for Rich Text/playground

Annotate a preview to embed its Figma design here:

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