# 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
{status} message
{status} message
;
})}
}
```
### 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: () =>
success message
success message
}
```
### Password
```tsx
{
render: () => {
const [showPassword, setShowPassword] = useState(false);
return : } onClick={() => setShowPassword(!showPassword)} style={{
border: 0,
width: 'auto',
height: 'auto'
}} />} />;
}
}
```
### Right Alignment
```tsx
{
args: {
value: '텍스트',
alignment: 'right',
placeholder: '텍스트를 입력해주세요.'
}
}
```
### Search
```tsx
{
args: {
startElement:
}
}
```
### Size
```tsx
{
render: () =>
{(['large', 'medium', 'small', 'xsmall'] as InputSize[]).map(size =>
} placeholder='텍스트를 입력해주세요.' />
)}
{(['large', 'medium', 'small', 'xsmall'] as InputSize[]).map(size =>
} prefix='prefix' suffix='suffix' placeholder='텍스트를 입력해주세요.' />
)}
}
```
### Success
```tsx
{
args: {
status: 'success',
value: '텍스트',
placeholder: '텍스트를 입력해주세요.'
}
}
```
### Width
```tsx
{
args: {
width: 500,
placeholder: '텍스트를 입력해주세요.'
}
}
```
### With Button
```tsx
{
render: () =>
02:59
} />
} />
}
```