# Component/NumericInput

> Props: component-numericinput.props.txt

## Examples


### Addon

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

### Addon With Width

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

### Allow Empty

```tsx
{
  args: {
    allowEmpty: true,
    value: 0
  }
}
```

### Base

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

### Decimal Scale

```tsx
{
  args: {
    decimalScale: 0
  }
}
```

### Disabled

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

### Entered Disabled

```tsx
{
  args: {
    disabled: true,
    prefix: '왕복',
    suffix: '원',
    value: 123456789,
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Error

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

### Focus

```tsx
{
  render: args => {
    const ref1 = useRef<HTMLInputElement>(null);
    const ref2 = useRef<HTMLInputElement>(null);
    return <Stack direction='column' gap={16}>
        <div style={{
        border: '1px solid',
        height: 200,
        padding: 20,
        overflow: 'scroll'
      }}>
          <NumericInput {...args} ref={ref1} />
          <div style={{
          backgroundColor: 'skyblue',
          height: 600
        }} />
          <NumericInput {...args} ref={ref2} />
        </div>
        <Stack gap={8}>
          <Button onClick={() => ref1.current?.focus()}>focus 1</Button>
          <Button onClick={() => ref2.current?.focus()}>focus 2</Button>
        </Stack>
      </Stack>;
  }
}
```

### Is Allowed

```tsx
{
  args: {
    isAllowed: ({
      floatValue
    }) => {
      return !floatValue || floatValue <= 100;
    }
  }
}
```

### Right Alignment

```tsx
{
  args: {
    prefix: '왕복',
    suffix: '원',
    alignment: 'right',
    placeholder: '텍스트를 입력해주세요.'
  }
}
```

### Set Value With Name

```tsx
{
  render: args => {
    const [value, setValue] = useState({
      apple: 0,
      banana: 0
    });
    const handleChange = (value: number, event: ChangeEvent<HTMLInputElement>) => {
      event.persist();
      const name = event.target.name;
      setValue(prev => ({
        ...prev,
        [name]: value
      }));
    };
    return <>
        <Stack direction='column' p={8}>
          <NumericInput {...args} name='apple' value={value['apple']} onChange={handleChange} />
        </Stack>
        <Stack direction='column' p={8}>
          <NumericInput {...args} name='banana' value={value['banana']} onChange={handleChange} />
        </Stack>
      </>;
  },
  args: {
    prefix: '가격',
    suffix: '원',
    placeholder: '텍스트를 입력해주세요.',
    allowEmpty: false
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={32}>
      <Stack direction='column' gap={16}>
        <NumericInput size='large' placeholder='숫자를 입력해주세요.' />
        <NumericInput size='medium' placeholder='숫자를 입력해주세요.' />
        <NumericInput size='xsmall' placeholder='숫자를 입력해주세요.' />
      </Stack>

      <Stack direction='column' gap={16}>
        <NumericInput size='large' prefix='왕복' suffix='원' placeholder='숫자를 입력해주세요.' />
        <NumericInput size='medium' prefix='왕복' suffix='원' placeholder='숫자를 입력해주세요.' />
        <NumericInput size='xsmall' prefix='왕복' suffix='원' placeholder='숫자를 입력해주세요.' />
      </Stack>
    </Stack>
}
```

### Whether Negative Numbers Are Allowed

```tsx
{
  args: {
    allowNegative: false
  }
}
```

### Width

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