# Component/InputGroup

> Props: component-inputgroup.props.txt

## Examples


### Amount With Currency

Dropdown이 뒤에 오는 조합. 값을 입력하는 칸에 `flex`를 주면 Dropdown은 내용 폭만 차지한다.

```tsx
{
  render: function Render(args) {
    const [currency, setCurrency] = useState('krw');
    return <InputGroup {...args}>
        <Input flex={1} alignment='right' placeholder='0' />
        <Dropdown options={CURRENCY_OPTIONS} value={currency} onChange={setCurrency} optionsMatchRefWidth={false} />
      </InputGroup>;
  },
  args: {
    width: 320
  },
  parameters: {
    docs: {
      description: {
        story: 'Dropdown이 뒤에 오는 조합. 값을 입력하는 칸에 `flex`를 주면 Dropdown은 내용 폭만 차지한다.'
      }
    }
  }
}
```

### Base

```tsx
{
  render: args => <InputGroup {...args}>
      <Input placeholder='최소' alignment='right' />
      <Input placeholder='최대' alignment='right' />
    </InputGroup>,
  args: {
    width: 320
  }
}
```

### Conditional Segment

`{condition && <Input />}` 형태의 조건부 세그먼트는 구분선 개수에 그대로 반영된다.

```tsx
{
  render: function Render(args) {
    const [hasSuffix, setHasSuffix] = useState(false);
    return <Stack direction='column' gap={16} align='flex-start'>
        <label>
          <input type='checkbox' checked={hasSuffix} onChange={e => setHasSuffix(e.target.checked)} /> 세 번째
          세그먼트
        </label>
        <InputGroup {...args}>
          <Input placeholder='최소' alignment='right' />
          <Input placeholder='최대' alignment='right' />
          {hasSuffix && <InputGroupAddon>원</InputGroupAddon>}
        </InputGroup>
      </Stack>;
  },
  args: {
    width: 360
  },
  parameters: {
    docs: {
      description: {
        story: '`{condition && <Input />}` 형태의 조건부 세그먼트는 구분선 개수에 그대로 반영된다.'
      }
    }
  }
}
```

### Disabled

```tsx
{
  render: args => <InputGroup {...args}>
      <Input placeholder='최소' alignment='right' />
      <Input placeholder='최대' alignment='right' />
    </InputGroup>,
  args: {
    width: 320
  },
  args: {
    ...Base.args,
    disabled: true
  }
}
```

### Error

status는 그룹 테두리 색만 바꾼다. 세그먼트의 경고 아이콘은 `WithSegmentStatus`를 참고한다.

```tsx
{
  render: args => <InputGroup {...args}>
      <Input placeholder='최소' alignment='right' />
      <Input placeholder='최대' alignment='right' />
    </InputGroup>,
  args: {
    width: 320
  },
  args: {
    ...Base.args,
    status: 'error'
  },
  parameters: {
    docs: {
      description: {
        story: 'status는 그룹 테두리 색만 바꾼다. 세그먼트의 경고 아이콘은 `WithSegmentStatus`를 참고한다.'
      }
    }
  }
}
```

### Filter Bar

목록 화면 필터 바에서 쓰는 형태. 그룹끼리는 서로 독립적이고, 버튼은 그룹 밖에 둔다.

```tsx
{
  render: function Render() {
    const [column, setColumn] = useState('product_id');
    const [dateColumn, setDateColumn] = useState('expected_shipping');
    const [period, setPeriod] = useState('1m');
    const [value, setValue] = useState<CalendarItem[]>([]);
    return <Stack direction='row' gap={8} align='center' wrap='wrap'>
        <InputGroup size='xsmall' width={280}>
          <Dropdown options={COLUMN_OPTIONS} value={column} onChange={setColumn} optionsMatchRefWidth={false} />
          <Input flex={1} placeholder='검색어' />
        </InputGroup>
        <InputGroup size='xsmall' width={400}>
          <Dropdown options={DATE_COLUMN_OPTIONS} value={dateColumn} onChange={setDateColumn} optionsMatchRefWidth={false} />
          <Dropdown options={PERIOD_OPTIONS} value={period} onChange={setPeriod} optionsMatchRefWidth={false} />
          <DatePickerV2 value={value} onChange={setValue} flex={1} />
        </InputGroup>
        <Button size='xsmall' variant='filled' color='primary'>
          조회
        </Button>
      </Stack>;
  },
  parameters: {
    docs: {
      description: {
        story: '목록 화면 필터 바에서 쓰는 형태. 그룹끼리는 서로 독립적이고, 버튼은 그룹 밖에 둔다.'
      }
    }
  }
}
```

### Flex

세그먼트는 기본적으로 내용 폭을 유지한다. 남는 공간을 채우려면 `flex`를 지정한다.

```tsx
{
  render: args => <InputGroup {...args}>
      <InputGroupAddon>010</InputGroupAddon>
      <Input flex={1} placeholder='나머지 번호' />
    </InputGroup>,
  args: {
    width: 360
  },
  parameters: {
    docs: {
      description: {
        story: '세그먼트는 기본적으로 내용 폭을 유지한다. 남는 공간을 채우려면 `flex`를 지정한다.'
      }
    }
  }
}
```

### Highlighted

```tsx
{
  render: args => <InputGroup {...args}>
      <Input placeholder='최소' alignment='right' />
      <Input placeholder='최대' alignment='right' />
    </InputGroup>,
  args: {
    width: 320
  },
  args: {
    ...Base.args,
    status: 'highlighted'
  }
}
```

### Nested

`InputGroup`은 중첩할 수 있다. 안쪽 그룹은 테두리를 그리지 않고 바깥 필드에 얹히며, 여백과 라운드는 필드 가장자리에 닿은 칸만 가져간다.

```tsx
{
  render: function Render(args) {
    const [currency, setCurrency] = useState('krw');
    return <InputGroup {...args}>
        <Dropdown options={CURRENCY_OPTIONS} value={currency} onChange={setCurrency} optionsMatchRefWidth={false} />
        <InputGroup flex={1}>
          <InputGroupAddon>최소</InputGroupAddon>
          <NumericInput flex={1} alignment='right' placeholder='0' />
        </InputGroup>
      </InputGroup>;
  },
  args: {
    size: 'medium',
    width: 400
  },
  parameters: {
    docs: {
      description: {
        story: '`InputGroup`은 중첩할 수 있다. 안쪽 그룹은 테두리를 그리지 않고 바깥 필드에 얹히며, 여백과 라운드는 필드 가장자리에 닿은 칸만 가져간다.'
      }
    }
  }
}
```

### Number Range

`prefix`/`suffix`를 지정한 `Input`은 스스로 InputGroup을 렌더한다. 그래서 이렇게 그룹 안에 넣으면 중첩 그룹이 되어 바깥 테두리를 그대로 쓴다. 단위까지 포함해 한 칸으로 묶이므로 구분선도 알맞게 들어간다.

```tsx
{
  render: args => <InputGroup {...args}>
      <Input flex={1} alignment='right' placeholder='최소' suffix='원' />
      <Input flex={1} alignment='right' placeholder='최대' suffix='원' />
    </InputGroup>,
  args: {
    width: 400
  },
  parameters: {
    docs: {
      description: {
        story: ['`prefix`/`suffix`를 지정한 `Input`은 스스로 InputGroup을 렌더한다. 그래서 이렇게 그룹 안에 넣으면', '중첩 그룹이 되어 바깥 테두리를 그대로 쓴다. 단위까지 포함해 한 칸으로 묶이므로 구분선도 알맞게 들어간다.'].join(' ')
      }
    }
  }
}
```

### Number Range Without Unit Divider

`NumberRange`에서 값과 단위 사이의 구분선만 지운 형태. `Input`의 `suffix` 대신 단위를 중첩 `InputGroup`으로 직접 묶고, 그 그룹에만 `dividerVariant='none'`을 지정한다. 최소/최대를 가르는 바깥 그룹의 구분선은 그대로 남는다.

```tsx
{
  render: args => <InputGroup {...args}>
      <InputGroup flex={1} dividerVariant='none'>
        <Input flex={1} alignment='right' placeholder='최소' />
        <InputGroupAddon>원</InputGroupAddon>
      </InputGroup>
      <InputGroup flex={1} dividerVariant='none'>
        <Input flex={1} alignment='right' placeholder='최대' />
        <InputGroupAddon>원</InputGroupAddon>
      </InputGroup>
    </InputGroup>,
  args: {
    width: 400
  },
  parameters: {
    docs: {
      description: {
        story: ['`NumberRange`에서 값과 단위 사이의 구분선만 지운 형태. `Input`의 `suffix` 대신 단위를 중첩 `InputGroup`으로 직접 묶고,', "그 그룹에만 `dividerVariant='none'`을 지정한다. 최소/최대를 가르는 바깥 그룹의 구분선은 그대로 남는다."].join(' ')
      }
    }
  }
}
```

### Size

```tsx
{
  render: () => <Stack direction='column' gap={16}>
      {(['large', 'medium', 'small', 'xsmall'] as InputSize[]).map(size => <FormField label={size} key={size} size={size}>
          <InputGroup size={size} width={320}>
            <Input placeholder='최소' alignment='right' />
            <Input placeholder='최대' alignment='right' />
          </InputGroup>
        </FormField>)}
    </Stack>
}
```

### With Addon

`InputGroupAddon`은 문자열이 아닌 요소도 받는다. `Input`의 `prefix`/`suffix`를 그룹 안에서 쓰면 자동으로 이 형태로 렌더링된다.

```tsx
{
  render: args => <InputGroup {...args}>
      <InputGroupAddon>https://</InputGroupAddon>
      <Input flex={1} placeholder='example' />
      <InputGroupAddon>.kakaostyle.com</InputGroupAddon>
    </InputGroup>,
  args: {
    width: 400
  },
  parameters: {
    docs: {
      description: {
        story: '`InputGroupAddon`은 문자열이 아닌 요소도 받는다. `Input`의 `prefix`/`suffix`를 그룹 안에서 쓰면 자동으로 이 형태로 렌더링된다.'
      }
    }
  }
}
```

### With Date Picker

단일 날짜 선택(`target='all'`). 날짜 입력이 하나의 세그먼트가 된다.

```tsx
{
  render: function Render(args) {
    const [period, setPeriod] = useState('1m');
    const [value, setValue] = useState<CalendarItem[]>([]);
    return <InputGroup {...args}>
        <Dropdown options={PERIOD_OPTIONS} value={period} onChange={setPeriod} optionsMatchRefWidth={false} />
        <DatePickerV2 value={value} onChange={setValue} flex={1} unit='day' target='all' />
      </InputGroup>;
  },
  args: {
    size: 'xsmall',
    width: 280
  },
  parameters: {
    docs: {
      description: {
        story: "단일 날짜 선택(`target='all'`). 날짜 입력이 하나의 세그먼트가 된다."
      }
    }
  }
}
```

### With Date Range Picker

범위 선택. 시작일/종료일은 중첩 그룹의 각 칸이 되고, 편집 중인 칸 아래에 인디케이터가 붙는다. 인디케이터는 DatePicker 전용 표현이라 다른 조합에서는 나오지 않는다.

```tsx
{
  render: function Render(args) {
    const [dateColumn, setDateColumn] = useState('expected_shipping');
    const [period, setPeriod] = useState('1m');
    const [value, setValue] = useState<CalendarItem[]>([]);
    return <InputGroup {...args}>
        <Dropdown options={DATE_COLUMN_OPTIONS} value={dateColumn} onChange={setDateColumn} optionsMatchRefWidth={false} />
        <Dropdown options={PERIOD_OPTIONS} value={period} onChange={setPeriod} optionsMatchRefWidth={false} />
        <DatePickerV2 value={value} onChange={setValue} flex={1} />
      </InputGroup>;
  },
  args: {
    size: 'xsmall',
    width: 400
  },
  parameters: {
    docs: {
      description: {
        story: '범위 선택. 시작일/종료일은 중첩 그룹의 각 칸이 되고, 편집 중인 칸 아래에 인디케이터가 붙는다. 인디케이터는 DatePicker 전용 표현이라 다른 조합에서는 나오지 않는다.'
      }
    }
  }
}
```

### With Dropdown

서로 다른 종류의 컨트롤을 하나의 필드로 합성한다.

```tsx
{
  render: function Render(args) {
    const [column, setColumn] = useState('product_id');
    return <InputGroup {...args}>
        <InputGroupAddon>정렬</InputGroupAddon>
        <Dropdown options={COLUMN_OPTIONS} value={column} onChange={setColumn} optionsMatchRefWidth={false} />
      </InputGroup>;
  },
  args: {
    size: 'xsmall',
    width: 'auto'
  },
  parameters: {
    docs: {
      description: {
        story: '서로 다른 종류의 컨트롤을 하나의 필드로 합성한다.'
      }
    }
  }
}
```

### With Form Field

FormField의 라벨·헬퍼텍스트와 함께 쓰는 형태. FormField는 InputGroup에 status를 자동으로 공유하지 않으므로 그룹에도 직접 지정한다.

```tsx
{
  render: function Render(args) {
    const [column, setColumn] = useState('product_id');
    return <Stack direction='column' gap={20} width={360}>
        <FormField label='검색 조건' helperText='상품번호는 숫자만 입력할 수 있습니다.'>
          <InputGroup {...args}>
            <Dropdown options={COLUMN_OPTIONS} value={column} onChange={setColumn} optionsMatchRefWidth={false} />
            <Input flex={1} placeholder='검색어를 입력하세요.' />
          </InputGroup>
        </FormField>
        <FormField label='검색 조건' status='error' helperText='검색어를 입력해 주세요.'>
          <InputGroup {...args} status='error'>
            <Dropdown options={COLUMN_OPTIONS} value={column} onChange={setColumn} optionsMatchRefWidth={false} />
            <Input flex={1} status='error' placeholder='검색어를 입력하세요.' />
          </InputGroup>
        </FormField>
      </Stack>;
  },
  parameters: {
    docs: {
      description: {
        story: 'FormField의 라벨·헬퍼텍스트와 함께 쓰는 형태. FormField는 InputGroup에 status를 자동으로 공유하지 않으므로 그룹에도 직접 지정한다.'
      }
    }
  }
}
```

### With Input

서로 다른 종류의 컨트롤을 하나의 필드로 합성한다.

```tsx
{
  render: function Render(args) {
    const [column, setColumn] = useState('product_id');
    return <InputGroup {...args}>
        <Dropdown options={COLUMN_OPTIONS} value={column} onChange={setColumn} optionsMatchRefWidth={false} />
        <Input flex={1} placeholder='검색어를 입력하세요.' />
      </InputGroup>;
  },
  args: {
    size: 'xsmall',
    width: 400
  },
  parameters: {
    docs: {
      description: {
        story: '서로 다른 종류의 컨트롤을 하나의 필드로 합성한다.'
      }
    }
  }
}
```

### With Numeric Input

`NumericInput`도 세그먼트로 동작한다. 자체 `suffix`는 중첩 그룹의 addon으로 렌더된다.

```tsx
{
  render: args => <InputGroup {...args}>
      <InputGroupAddon>배송비</InputGroupAddon>
      <NumericInput flex={1} alignment='right' placeholder='0' suffix='원' />
    </InputGroup>,
  args: {
    width: 320
  },
  parameters: {
    docs: {
      description: {
        story: '`NumericInput`도 세그먼트로 동작한다. 자체 `suffix`는 중첩 그룹의 addon으로 렌더된다.'
      }
    }
  }
}
```

### With Numeric Input Without Unit Divider

`WithNumericInput`에서 단위 앞 구분선만 지운 형태. prefix/suffix를 `InputGroupAddon`으로 직접 쓰면 어느 구분선을 남길지 중첩 단위로 고를 수 있다. 여기서는 `배송비`와 값 사이의 구분선은 남기고 값과 `원` 사이만 지웠다.

```tsx
{
  render: args => <InputGroup {...args}>
      <InputGroupAddon>배송비</InputGroupAddon>
      <InputGroup flex={1} dividerVariant='none'>
        <NumericInput flex={1} alignment='right' placeholder='0' />
        <InputGroupAddon>원</InputGroupAddon>
      </InputGroup>
    </InputGroup>,
  args: {
    width: 320
  },
  parameters: {
    docs: {
      description: {
        story: ['`WithNumericInput`에서 단위 앞 구분선만 지운 형태. prefix/suffix를 `InputGroupAddon`으로 직접 쓰면', '어느 구분선을 남길지 중첩 단위로 고를 수 있다. 여기서는 `배송비`와 값 사이의 구분선은 남기고 값과 `원` 사이만 지웠다.'].join(' ')
      }
    }
  }
}
```

### With Segment Status

```tsx
{
  render: args => <InputGroup {...args}>
      <Input placeholder='최소' alignment='right' />
      <Input status='error' value='0' alignment='right' readOnly />
    </InputGroup>,
  args: {
    width: 320,
    status: 'error'
  }
}
```

### With Time Picker

날짜와 시각을 한 필드로 묶는 조합. 두 팝오버는 각자 자기 세그먼트를 기준으로 열린다.

```tsx
{
  render: function Render(args) {
    const [date, setDate] = useState<CalendarItem[]>([]);
    const [time, setTime] = useState<Date | undefined>(undefined);
    return <InputGroup {...args}>
        <DatePickerV2 value={date} onChange={setDate} target='all' flex={1} />
        <TimePicker value={time} onChange={next => setTime(next ?? undefined)} flex={1} />
      </InputGroup>;
  },
  args: {
    size: 'xsmall',
    width: 360
  },
  parameters: {
    docs: {
      description: {
        story: '날짜와 시각을 한 필드로 묶는 조합. 두 팝오버는 각자 자기 세그먼트를 기준으로 열린다.'
      }
    }
  }
}
```

### With Time Range Picker

`TimeRangePicker`는 `DatePicker`와 마찬가지로 중첩 그룹으로 렌더되어 시작/종료 시각이 각각의 칸이 된다.

```tsx
{
  render: function Render(args) {
    const [range, setRange] = useState<TimeRange>({
      from: null,
      to: null
    });
    return <InputGroup {...args}>
        <InputGroupAddon>운영 시간</InputGroupAddon>
        <TimeRangePicker value={range} onChange={(from, to) => setRange({
        from,
        to
      })} flex={1} />
      </InputGroup>;
  },
  args: {
    size: 'xsmall',
    width: 360
  },
  parameters: {
    docs: {
      description: {
        story: '`TimeRangePicker`는 `DatePicker`와 마찬가지로 중첩 그룹으로 렌더되어 시작/종료 시각이 각각의 칸이 된다.'
      }
    }
  }
}
```