Files

File controls can be used to select files and attach them to forms.

Genshi is compatible with the <input type="file"> control via the GenshiInput form component.

<div class="GenshiInput">
  <label class="GenshiInput__label">
    Avatar
    <input type="file" class="GenshiInput__control" placeholder="Select a photo" />
  </label>
  <small class="GenshiInput__helper">Select a photo to use as an avatar.</small>
</div>

Disabled

Add the disabled attribute to the <input> tag to disable the field.

Icons

File controls do not properly support an icon before the element. You can add an icon after the element, though.

Validation

For validation purposes you can add the aria-invalid="true" or aria-invalid="false" to the field.

If you are going to do this, it is recommended to include an icon, to convey the validation status without depending on color.

Sizes

Use the GenshiInput--xs, GenshiInput--sm, GenshiInput--lg and GenshiInput--lg to alter its size.