import { Canvas, Meta, ArgTypes } from '@storybook/blocks';
import { ThemeProvider } from 'styled-components';
import * as FormFieldStories from './FormField.stories.tsx';
import Checkbox from '../Checkbox';
import Flex from '../Flex';
import FormField from './';
import Input from '../Input';
import RadioGroup from '../RadioGroup';
import Select from '../Select';
import Textarea from '../Textarea';
import { lightTheme } from '../../../theme/';
import { GlobalStyles } from '../../../theme/GlobalStyles';

<Meta of={FormFieldStories} />

# FormField

The FormField component displays a single field in a form.

## Importing

```javascript
import { FormField } from 'amazon-chime-sdk-component-library-react';
```

## Example

### Input Field

With layout `stack` and `informational` text.

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <FormField
        field={Input}
        label="First Name"
        value="Sample input value"
        fieldProps={{ name: 'firstName', placeholder: 'Enter your first name' }}
        onChange={() => {}}
        layout="stack"
        errorText="This is some error text"
        error={false}
        infoText="This is some informational text"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<FormField
  field={Input}
  label="First Name"
  value="Sample input value"
  fieldProps={{ name: 'firstName', placeholder: 'Enter your first name' }}
  onChange={() => {}}
  layout="stack"
  errorText="This is some error text"
  error={false}
  infoText="This is some informational text"
/>
```

With layout `horizontal` and `error` text.

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <FormField
        field={Input}
        label="First Name"
        value=""
        fieldProps={{ name: 'firstName', placeholder: 'Enter your first name' }}
        onChange={() => {}}
        layout="horizontal"
        errorText="This is some error text"
        error={true}
        infoText="This is some informational text"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<FormField
  field={Input}
  label="First Name"
  value=""
  fieldProps={{ name: 'firstName', placeholder: 'Enter your first name' }}
  onChange={() => {}}
  layout="horizontal"
  errorText="This is some error text"
  error={true}
  infoText="This is some informational text"
/>
```

### Select Field

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <FormField
        field={Select}
        options={[
          { value: 'react', label: 'React' },
          { value: 'angular', label: 'Angular' },
        ]}
        onChange={() => {}}
        value="react"
        label="Select a framework"
        layout="stack"
        errorText="This is some error text"
        error={false}
        infoText="This is some informational text"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<FormField
  field={Select}
  options={[
    { value: 'react', label: 'React' },
    { value: 'angular', label: 'Angular' },
  ]}
  onChange={() => {}}
  value="react"
  label="Select a framework"
  layout="stack"
  errorText="This is some error text"
  error={false}
  infoText="This is some informational text"
/>
```

### Textarea Field

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <FormField
        field={Textarea}
        label="I'm a label"
        value="test value"
        fieldProps={{ placeholder: 'Text goes here' }}
        onChange={() => {}}
        layout="horizontal"
        errorText="This is some error text"
        error={false}
        infoText="This is some informational text"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<FormField
  field={Textarea}
  label="I'm a label"
  value="test value"
  fieldProps={{ placeholder: 'Text goes here' }}
  onChange={() => {}}
  layout="horizontal"
  errorText="This is some error text"
  error={false}
  infoText="This is some informational text"
/>
```

### Checkbox Field

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <FormField
        field={Checkbox}
        label="React"
        value="react"
        checked
        onChange={() => {}}
        css="margin-right: 1rem"
      />
      <FormField
        field={Checkbox}
        label="Angular"
        value="angular"
        checked={false}
        onChange={() => {}}
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<FormField
  field={Checkbox}
  label="React"
  value="react"
  checked
  onChange={() => {}}
/>
<FormField
  field={Checkbox}
  label="Angular"
  value="angular"
  checked={false}
  onChange={() => {}}
/>
```

### Radio Group Field

<ThemeProvider theme={lightTheme}>
  <GlobalStyles />
  <Canvas>
    <Flex layout="fill-space-centered">
      <FormField
        options={[
          { value: 'react', label: 'React' },
          { value: 'angular', label: 'Angular' },
          { value: 'vue', label: 'Vue' },
        ]}
        field={RadioGroup}
        onChange={() => {}}
        value="vue"
        label="Select from the following"
        errorText="This is some error text"
        error
        infoText="This is some informational text"
      />
    </Flex>
  </Canvas>
</ThemeProvider>

```jsx
<FormField
  options={[
    { value: 'react', label: 'React' },
    { value: 'angular', label: 'Angular' },
    { value: 'vue', label: 'Vue' },
  ]}
  field={RadioGroup}
  onChange={() => {}}
  value="vue"
  label="Select from the following"
  errorText="This is some error text"
  error
  infoText="This is some informational text"
/>
```

## Props

<ArgTypes of={FormField} />