# Component/Form/FormField

> Props: component-form-formfield.props.txt

## Examples


### Base

```tsx
{
  args: {
    required: true,
    label: 'Label'
  },
  render: args => <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
    </Stack>
}
```

### Error

```tsx
{
  render: (args) => (
    <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>
  ),
  args: {
    required: true,
    status: 'error',
    formHelperText: '에러메시지',
    formHelperTextProps: {
      icon: true
    },
    label: 'Label'
  }
}
```

### Error Dropdown

```tsx
{
  args: {
    required: true,
    status: 'error',
    formHelperText: '에러메시지',
    formHelperTextProps: {
      icon: true
    },
    label: 'Label'
  },
  render: args => <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Dropdown placeholder='옵션을 선택해주세요.' options={[]} />
      </FormField>
      <FormField {...args}>
        <Dropdown placeholder='옵션을 선택해주세요.' options={[]} />
      </FormField>
    </Stack>
}
```

### Error Long Label

```tsx
{
  render: (args) => (
    <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>
  ),
  args: {
    labelWidth: 250,
    required: true,
    status: 'error',
    formHelperText: '에러메시지',
    formHelperTextProps: {
      icon: true
    },
    label: 'Long Long Long Long Long Long Label'
  }
}
```

### Error Long Message

```tsx
{
  render: (args) => (
    <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>
  ),
  args: {
    label: 'Label',
    alignment: 'top',
    required: true,
    status: 'error',
    formHelperText: '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.',
    formHelperTextProps: {
      icon: true
    }
  }
}
```

### Error Long Message Short Input

```tsx
{
  render: args => <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input width={200} placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input width={200} placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>,
  args: {
    label: 'Label',
    alignment: 'top',
    required: true,
    status: 'error',
    formHelperText: '동해물과 백두산이 마르고 닳도록 하느님이 보우하사 우리나라 만세 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 남산 위에 저 소나무 철갑을 두른 듯 바람서리 불변함은 우리 기상일세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 가을 하늘 공활한데 높고 구름 없이 밝은 달은 우리 가슴 일편단심일세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 이 기상과 이 맘으로 충성을 다하여 괴로우나 즐거우나 나라 사랑하세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세. 무궁화 삼천리 화려강산 대한사람 대한으로 길이 보전하세.',
    formHelperTextProps: {
      icon: true
    }
  }
}
```

### Error No Label

```tsx
{
  render: (args) => (
    <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>
  ),
  args: {
    required: true,
    status: 'error',
    formHelperText: '에러메시지',
    formHelperTextProps: {
      icon: true
    }
  }
}
```

### Error Overflow Label

```tsx
{
  render: (args) => (
    <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>
  ),
  args: {
    required: true,
    status: 'error',
    formHelperText: '에러메시지',
    formHelperTextProps: {
      icon: true
    },
    label: 'Long Long Label'
  }
}
```

### Error Top

```tsx
{
  render: (args) => (
    <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' size='xsmall' />
      </FormField>
    </Stack>
  ),
  args: {
    required: true,
    status: 'error',
    formHelperText: '에러메시지',
    formHelperTextProps: {
      icon: true
    },
    label: 'Label',
    alignment: 'top',
    position: 'top'
  }
}
```

### Label Width

```tsx
{
  args: {
    required: true,
    label: 'Label'
  },
  render: args => <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
    </Stack>,
  args: {
    required: true,
    label: 'Label',
    labelWidth: 100
  }
}
```

### Success Checkbox Group

```tsx
{
  render: args => <FormField {...args}>
      <CheckboxGroup items={items} />
    </FormField>,
  args: {
    required: true,
    label: 'Label',
    status: 'success',
    formHelperText: '성공',
    formHelperTextProps: {
      icon: true
    }
  }
}
```

### Top Align

```tsx
{
  render: (args) => (
    <FormField {...args}>
      <Stack direction='column' gap={4}>
        <Input placeholder='텍스트를 입력해주세요.' />
        <Input placeholder='텍스트를 입력해주세요.' />
        <Input placeholder='텍스트를 입력해주세요.' />
      </Stack>
    </FormField>
  ),
  args: {
    required: true,
    label: 'Label',
    alignment: 'top'
  }
}
```

### Top Position

```tsx
{
  render: (args) => (
    <FormField {...args}>
      <Input size='large' placeholder='텍스트를 입력해주세요.' />
    </FormField>
  ),
  args: {
    required: true,
    label: 'Label',
    alignment: 'top',
    position: 'top'
  }
}
```

### With Checkbox Group

```tsx
{
  render: args => <FormField {...args}>
      <CheckboxGroup items={items} />
    </FormField>,
  args: {
    required: true,
    label: 'Label'
  }
}
```

### With Help Popover

```tsx
{
  args: {
    required: true,
    label: 'Label'
  },
  render: args => <Stack direction='column' gap={8}>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
      <FormField {...args}>
        <Input placeholder='텍스트를 입력해주세요.' />
      </FormField>
    </Stack>,
  args: {
    required: true,
    label: 'Label',
    helper: {
      title: 'title',
      contents: [{
        text: '- 여러 줄글의 텍스트를 작성할 수 있습니다.'
      }, {
        text: '- 여러 줄글의 텍스트를 작성할 수 있습니다.'
      }]
    }
  }
}
```

### With Radio Group

```tsx
{
  render: args => <FormField {...args}>
      <RadioGroup items={items} />
    </FormField>,
  args: {
    required: true,
    label: 'Label'
  }
}
```