# Component/Input

> Props: component-input.props.txt

## Examples


### Addon

```tsx
{
  args: {
    prefix: 'prefix',
    suffix: 'suffix'
  }
}
```

### Addon With Form Helper Text

```tsx
{
  render: () => <>
      {['error', 'info', 'success'].map(status => {
      return <Stack direction='row' p={6} gap={16} key={status}>
            <Stack direction='column' width='50%'>
              <Input status={status as InputStatus} placeholder='텍스트를 입력해주세요.' alignment='left' prefix='prefix' suffix='suffix' />
              <FormHelperText status={status as InputStatus}>{status} message</FormHelperText>
            </Stack>
            <Stack direction='column' width='50%'>
              <Input status={status as InputStatus} placeholder='텍스트를 입력해주세요.' alignment='right' prefix='prefix' suffix='suffix' />
              <FormHelperText status={status as InputStatus}>{status} message</FormHelperText>
            </Stack>
          </Stack>;
    })}
    </>
}
```

### Addon With Width

```tsx
{
  args: {
    width: 500,
    prefix: 'prefix',
    suffix: 'suffix',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Base

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Disabled

```tsx
{
  args: {
    disabled: true,
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Entered Disabled

```tsx
{
  args: {
    disabled: true,
    value: '텍스트',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Error

```tsx
{
  args: {
    status: 'error',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Max Length

```tsx
{
  args: {
    placeholder: '텍스트를 입력해주세요.',
    showCounter: true,
    maxLength: 10
  }
}
```

### Max Length With Combined

```tsx
{
  render: () => <Stack direction='row' p={6} gap={6}>
      <Stack direction='column' width='50%'>
        <Input status='success' placeholder='텍스트를 입력해주세요.' alignment='left' prefix='prefix' suffix='suffix' showCounter maxLength={10} />
        <FormHelperText status='success'>success message</FormHelperText>
      </Stack>
      <Stack direction='column' width='50%'>
        <Input status='success' placeholder='텍스트를 입력해주세요.' alignment='right' prefix='prefix' suffix='suffix' showCounter maxLength={10} />
        <FormHelperText status='success'>success message</FormHelperText>
      </Stack>
    </Stack>
}
```

### Password

```tsx
{
  render: () => {
    const [showPassword, setShowPassword] = useState(false);
    return <Input type={showPassword ? 'text' : 'password'} endElement={<IconButton size='large' icon={showPassword ? <IconEyeOn color={semantic_colors.content.tertiary} /> : <IconEyeOff color={semantic_colors.content.tertiary} />} onClick={() => setShowPassword(!showPassword)} style={{
      border: 0,
      width: 'auto',
      height: 'auto'
    }} />} />;
  }
}
```

### Right Alignment

```tsx
{
  args: {
    value: '텍스트',
    alignment: 'right',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Search

```tsx
{
  args: {
    startElement: <IconSearch color={semantic_colors.content.tertiary} size={14} />
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={32}>
      <Stack direction='column' gap={16}>
        {(['large', 'medium', 'small', 'xsmall'] as InputSize[]).map(size => <FormField label={size} key={size}>
            <Input size={size} startElement={<IconSearch />} placeholder='텍스트를 입력해주세요.' />
          </FormField>)}
      </Stack>
      <Stack direction='column' gap={16}>
        {(['large', 'medium', 'small', 'xsmall'] as InputSize[]).map(size => <FormField label={size} key={size}>
            <Input size={size} startElement={<IconSearch />} prefix='prefix' suffix='suffix' placeholder='텍스트를 입력해주세요.' />
          </FormField>)}
      </Stack>
    </Stack>
}
```

### Success

```tsx
{
  args: {
    status: 'success',
    value: '텍스트',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Width

```tsx
{
  args: {
    width: 500,
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### With Button

```tsx
{
  render: () => <Stack direction='column' gap={12}>
      <Stack direction='row' gap={4}>
        <Input placeholder='placeholder' />
        <Button>Label</Button>
      </Stack>
      <Stack direction='row' gap={4}>
        <Input placeholder='placeholder' prefix='prefix' suffix='suffix' width='100%' />
        <Button>Label</Button>
      </Stack>
      <Stack direction='row' gap={4}>
        <Input placeholder='placeholder' endElement={<BaseText kind='Body_12_Regular' color={semantic_colors.content.secondary}>
              02:59
            </BaseText>} />
        <Button>Label</Button>
      </Stack>
      <Stack direction='row' gap={4}>
        <Input placeholder='placeholder' startElement={<IconSearch color={semantic_colors.content.tertiary} size={14} />} />
        <Button>검색</Button>
      </Stack>
    </Stack>
}
```