# Component/Form/FormField

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

## Examples


### Base

```tsx
{
  args: {
    label: 'Label',
    helper: {
      contents: [{
        text: '도움말'
      }]
    },
    formHelperText: 'Info message'
  },
  render: args => <FormField {...args}>
      <Input placeholder='Placeholder' />
    </FormField>
}
```

### Deprecated Alignment

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

### Error

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

### Label Width

```tsx
{
  args: {
    label: 'Label',
    helper: {
      contents: [{
        text: '도움말'
      }]
    },
    formHelperText: 'Info message'
  },
  render: args => <FormField {...args}>
      <Input placeholder='Placeholder' />
    </FormField>,
  args: {
    required: true,
    label: 'Label',
    labelWidth: 100
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={24}>
      <Stack direction='column' gap={16}>
        {(['large', 'medium', 'small', 'xsmall'] as InputSize[]).map(size => <FormField label={size} key={size} size={size} formHelperText='Info message'>
            <Input size={size} placeholder='텍스트를 입력해주세요.' />
          </FormField>)}
      </Stack>
      <Stack direction='column' gap={12}>
        <Stack direction='column' gap={4}>
          <BaseText as='div' kind='Body_13_SemiBold'>
            FormField size &gt;= input size: 상하 정렬 대응
          </BaseText>
          <BaseText as='div' kind='Body_12_Regular' color={semantic_colors.content.secondary}>
            FormField가 children보다 충분히 높으면 children wrapper가 입력 요소나 텍스트를 세로 중앙에 맞춥니다.
          </BaseText>
        </Stack>
        <Stack direction='column' gap={16}>
          {alignedSizeExamples.map(({
          size,
          inputSize
        }) => <FormField label={`${size} / input ${inputSize}`} key={`${size}-${inputSize}`} labelWidth={160} size={size}>
              <Input size={inputSize} placeholder='텍스트를 입력해주세요.' />
            </FormField>)}
          <FormField label='medium / typography' labelWidth={160} size='medium'>
            <BaseText kind='Body_13_Regular'>텍스트 children</BaseText>
          </FormField>
        </Stack>
      </Stack>
      <Stack direction='column' gap={12}>
        <Stack direction='column' gap={4}>
          <BaseText as='div' kind='Body_13_SemiBold'>
            FormField size &lt; input size: 상하 정렬 대응 불가
          </BaseText>
          <BaseText as='div' kind='Body_12_Regular' color={semantic_colors.content.secondary}>
            children이 FormField 기준 높이보다 크면 wrapper만으로는 보정되지 않아 FormField가 입력 요소보다 조금 위에
            보입니다.
          </BaseText>
        </Stack>
        <Stack direction='column' gap={16}>
          {unalignedSizeExamples.map(({
          size,
          inputSize
        }) => <FormField label={`${size} / input ${inputSize}`} key={`${size}-${inputSize}`} labelWidth={160} size={size}>
              <Input size={inputSize} placeholder='텍스트를 입력해주세요.' />
            </FormField>)}
        </Stack>
      </Stack>
    </Stack>
}
```

### Success Checkbox Group

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

### Top Position

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

### With Checkbox Group

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

### With Help Popover

```tsx
{
  args: {
    label: 'Label',
    helper: {
      contents: [{
        text: '도움말'
      }]
    },
    formHelperText: 'Info message'
  },
  render: args => <FormField {...args}>
      <Input placeholder='Placeholder' />
    </FormField>,
  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'
  }
}
```