Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
<div class="flex items-center justify-center p-16">
  <div class="midwest-input midwest-form-group type-file" data-controller="midwest-file">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="upload-e5d0">
        Upload a file
      </label>
    </div>
    <input type="file" name="upload" id="upload-e5d0" data-midwest-file-target="input" />
    <output class="midwest-grid fit" name="preview" for="upload-e5d0" data-midwest-file-target="output"></output>
  </div>
</div>
1
2
3
<div class="flex items-center justify-center p-16">
  <%= render Midwest::Form::FileComponent.new(name: "upload", label: "Upload a file", preview: true) %>
</div>

Default

A file input with preview enabled.

No params configured.

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

Accessibility

Figma embed for File/default

Annotate a preview to embed its Figma design here:

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