freesewing/sites/dev/docs/reference/packages/react/components/input/readme.mdx

---
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>

- [Components](#components)

## Components

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>