---
title: Input
---

import { DocusaurusDoc } from '@freesewing/react/components/Docusaurus'
import { ComponentDocs } from '@site/src/components/component-docs.js'
import {
  jsdocActiveImageInput,
  jsdocButtonFrame,
  jsdocDesignInput,
  jsdocEmailInput,
  jsdocFieldset,
  jsdocFileInput,
  jsdocImageInput,
  jsdocListInput,
  jsdocMarkdownInput,
  jsdocMeasurementInput,
  jsdocMfaInput,
  jsdocNumberInput,
  jsdocPassiveImageInput,
  jsdocPasswordInput,
  jsdocStringInput,
  jsdocToggleInput,
} from '@site/prebuild/jsdoc/components.input.mjs'
import {
  ActiveImageInputExample,
  ButtonFrameExample,
  DesignInputExample,
  EmailInputExample,
  FieldsetExample,
  FileInputExample,
  ImageInputExample,
  ListInputExample,
  MarkdownInputExample,
  MeasurementInputExample,
  MfaInputExample,
  NumberInputExample,
  PassiveImageInputExample,
  PasswordInputExample,
  StringInputExample,
  ToggleInputExample,
} from './_examples.js'

<DocusaurusDoc>

The **Input** component family provides the following components:

- [ActiveImageInput](#activeimageinput)
- [ButtonFrame](#buttonframe)
- [DesignInput](#designinput)
- [EmailInput](#emailinput)
- [Fieldset](#fieldset)
- [FileInput](#fileinput)
- [ImageInput](#imageinput)
- [ListInput](#listinput)
- [MarkdownInput](#markdowninput)
- [MeasurementInput](#measurementinput)
- [MfaInput](#mfainput)
- [NumberInput](#numberinput)
- [PassiveImageInput](#passiveimageinput)
- [PasswordInput](#passwordinput)
- [StringInput](#stringinput)
- [ToggleInput](#toggleinput)

## ActiveImageInput
<ComponentDocs docs={jsdocActiveImageInput} example={ActiveImageInputExample} />

## ButtonFrame
<ComponentDocs docs={jsdocButtonFrame} example={ButtonFrameExample} />

## DesignInput
<ComponentDocs docs={jsdocDesignInput} example={DesignInputExample} />

## EmailInput
<ComponentDocs docs={jsdocEmailInput} example={EmailInputExample} />

## Fieldset
<ComponentDocs docs={jsdocFieldset} example={FieldsetExample} />

## FileInput
<ComponentDocs docs={jsdocFileInput} example={FileInputExample} />

## ImageInput
<ComponentDocs docs={jsdocImageInput} example={ImageInputExample} />

## ListInput
<ComponentDocs docs={jsdocListInput} example={ListInputExample} />

## MarkdownInput
<ComponentDocs docs={jsdocMarkdownInput} example={MarkdownInputExample} />

## MeasurementInput
<ComponentDocs docs={jsdocMeasurementInput} example={MeasurementInputExample} />

## MfaInput
<ComponentDocs docs={jsdocMfaInput} example={MfaInputExample} />

## NumberInput
<ComponentDocs docs={jsdocNumberInput} example={NumberInputExample} />

## PassiveImageInput
<ComponentDocs docs={jsdocPassiveImageInput} example={PassiveImageInputExample} />

## PasswordInput
<ComponentDocs docs={jsdocPasswordInput} example={PasswordInputExample} />

## StringInput
<ComponentDocs docs={jsdocStringInput} example={StringInputExample} />

## ToggleInput
<ComponentDocs docs={jsdocToggleInput} example={ToggleInputExample} />

</DocusaurusDoc>
