ChipChoice.Time

Чип-фильтр с выбором времени. Значение — объект { hours, minutes, seconds }. Секунды отображаются опционально через showSeconds.

Когда использовать

Для фильтрации по времени суток в ряду чипов-фильтров.
Когда нужно выбрать часы и минуты (опционально секунды) компактным контролом.

Когда не нужен ChipChoice.Time:

Для выбора даты или даты со временем — используйте ChipChoice.Date.
Для выбора периода дат — используйте ChipChoice.DateRange.

Анатомия

Size (default `s`)

s — для плотных тулбаров и строк фильтров.
m — стандартный размер.
l — для крупных форм.

Seconds (default `false`)

Проп showSeconds управляет отображением секунд:

false — выбор только часов и минут.
true — добавляет поле секунд; поле seconds объекта значения становится значимым.

Текст внутри чипа настраивается через valueRender(value) — функция получает текущий объект { hours, minutes, seconds } и возвращает узел для отображения.

Состояния

disabled — отключает взаимодействие.
loading — показывает спиннер и блокирует открытие выпадающего списка времени.

Установка

pnpm add @cloud-ru/ds-chips

import { ChipChoice } from '@cloud-ru/ds-chips'

Примеры использования

Выбор времени

Выбор времениЧасы и минуты, контролируемое значение

tsx

import { ChipChoice, ChipChoiceTimeProps } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ChoiceTimeBasic() {
  const [value, setValue] = useState<ChipChoiceTimeProps['value']>({
    hours: 9,
    minutes: 30,
  });

  return <ChipChoice.Time label='Время' value={value} onChange={setValue} />;
}

С секундами

С секундамиshowSeconds добавляет поле секунд

tsx

import { ChipChoice, ChipChoiceTimeProps } from '@cloud-ru/ds-chips';
import { useState } from 'react';

export function ChoiceTimeSeconds() {
  const [value, setValue] = useState<ChipChoiceTimeProps['value']>({
    hours: 9,
    minutes: 30,
    seconds: 15,
  });

  return <ChipChoice.Time label='Время' showSeconds value={value} onChange={setValue} />;
}

Props

Types

PropsChipChoiceTimeProps

Prop	Type	Default	Required	Description
`className`	`string`	—	no	CSS-класс
`data-test-id`	`string`	—	no
`defaultValue`	`TimeValue`	—	no	Значение по-умолчанию для uncontrolled.
`disabled`	`boolean`	—	no	Отключён
`dropDownClassName`	`string`	—	no
`icon`	`ReactNode`	—	no	Иконка
`label`	`string`	—	no	Текст чипа
`loading`	`boolean`	—	no	Состояние загрузки
`onChange`	`((value: TimeValue) => void)`	—	no	Колбек смены значения
`onClearButtonClick`	`MouseEventHandler<HTMLButtonElement>`	—	no	Колбек для клика по кнопке очистки
`onClick`	`MouseEventHandler<HTMLButtonElement \| HTMLDivElement>`	—	no	Колбек обработки клика
`onOpenChange`	`((isOpen: boolean) => void)`	—	no	Колбек отображения компонента
`open`	`boolean`	—	no	Управляет состоянием показан/не показан
`placement`	`"bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "left-end" \| "left-start" \| "right" \| "right-end" \| "right-start" \| "top" \| "top-end" \| "top-start"`	—	no	Расположение выпадающего меню
`showSeconds`	`boolean`	`true`	no	Показывать ли секунды
`size`	`"l" \| "m" \| "s"`	`m`	no	Размер
`tabIndex`	`number`	—	no	Индекс в порядке фокусировки
`truncateVariant`	`"end" \| "middle"`	`'middle'`	no	Вариант обрезания строки Вариант обрезания значения
`value`	`TimeValue`	—	no	Выбранное значение.
`valueRender`	`((value?: TimeValue) => ReactNode)`	—	no	Колбек формирующий строковое представление выбранного значения

Storybook

Открыть в Storybook →

Figma

Открыть в Figma →

Смотри также

ChipChoice.Date — выбор даты.
ChipChoice.DateRange — выбор диапазона дат.
ChipChoice.Single — выбор одного значения из списка.