File Input

Default

SWAN's FileInput component is built upon the native HTML <input type="file"> element, so it can accept all of the native input’s events and attributes, including onChange to get the contents of the uploaded file, or multiple to let the user select multiple files.

The FileInputLabel sub-component is the visible part, since we hide the native <input> and only show this <label>. For accessibility, it must have accessible text, such as visible HTML text, visually-hidden text, alt text on an image, or an aria-label.

The preview has been updated.

ReactVanilla

CopySharePrettify

<FileInput>
  <FileInputLabel>Upload a file</FileInputLabel>
</FileInput>

<FileInput> <FileInputLabel>Upload a file</FileInputLabel> </FileInput>

CopySharePrettify

<input type="file" class="swan-file-input swan-visually-hidden" id="my-input" />
<label
  class="swan-file-input-label swan-button swan-button-skin-secondary"
  for="my-input"
  >Upload a file</label
>

<input type="file" class="swan-file-input swan-visually-hidden" id="my-input" /> <label class="swan-file-input-label swan-button swan-button-skin-secondary" for="my-input" >Upload a file</label >

Button Variants

FileUploadLabel is a <label>, but it accepts many of the visual props from Button. You can use these to customize the appearance of the label.

Available props are skin, sizeVariant, size, widthVariant, width, specialVariant, iconPosition, and buttonShape.

The preview has been updated.

CopySharePrettify

<>
  <FileInput>
    <FileInputLabel>Upload a file</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel skin="primary">Upload a file (Primary skin)</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel size="mini">Upload a file (mini size)</FileInputLabel>
  </FileInput>
  <FileInput>
    <FileInputLabel skin="link">Upload a file (link skin)</FileInputLabel>
  </FileInput>
</>

<> <FileInput> <FileInputLabel>Upload a file</FileInputLabel> </FileInput> <FileInput> <FileInputLabel skin="primary">Upload a file (Primary skin)</FileInputLabel> </FileInput> <FileInput> <FileInputLabel size="mini">Upload a file (mini size)</FileInputLabel> </FileInput> <FileInput> <FileInputLabel skin="link">Upload a file (link skin)</FileInputLabel> </FileInput> </>

Disabled

Use disabled when a FileInput's action is unavailable.

The preview has been updated.

CopySharePrettify

<FileInput disabled>
  <FileInputLabel>Upload a file</FileInputLabel>
</FileInput>

<FileInput disabled> <FileInputLabel>Upload a file</FileInputLabel> </FileInput>

Inside of a Form

Since it is a form element, FileInput can be used inside of a StandardForm along with a separate, external label and/or helper text.l

The preview has been updated.

CopySharePrettify

<StandardForm>
  <FormField>
    <FormLabel>Upload a file</FormLabel>
    <FormInputGroup>
      <FileInput onChange={e => e.target.files[0]}>
        <FileInputLabel size="mini">Upload a file</FileInputLabel>
      </FileInput>
      <FormHelper>Accepted File Types: jpg, pdf, etc</FormHelper>
    </FormInputGroup>
  </FormField>
</StandardForm>

<StandardForm> <FormField> <FormLabel>Upload a file</FormLabel> <FormInputGroup> <FileInput onChange={e => e.target.files[0]}> <FileInputLabel size="mini">Upload a file</FileInputLabel> </FileInput> <FormHelper>Accepted File Types: jpg, pdf, etc</FormHelper> </FormInputGroup> </FormField> </StandardForm>