Skip to content
BlazorUI

Pickers

DateRangePicker

Bit.BlazorUI

A BitDateRangePicker is a drop-down calendar for picking a start and an end date, where context such as the day of the week matters. It offers one-click presets, up to three months side by side, range limits and disabled days, an optional time picker, an optional Apply/Cancel step, an inline mode, full keyboard support and any culture or time zone.

Usage

Every example is live. Open its code to see exactly what produced the component running underneath.

Basic

The first click starts the range, the second ends it, a third starts over. The common field and calendar options: Label, Placeholder, Required, Disabled, ShowWeekNumbers, HighlightCurrentMonth/HighlightSelectedMonth, ShowTimePicker, IconName, IconPlacement, Underlined, HasBorder, DropDirection, AutoClose, ShowClearButton, IsMonthPickerVisible, and StartingValue (the month and times shown while the value is empty).






























StartingValue: December 2020
Start Time: 10:12
End Time: 16:59

Presets

Presets puts common ranges one click away beside the calendar. A BitDateRangePickerPreset has a fixed Value or a ValueProvider evaluated on each click (so "Last 7 days" never goes stale), and can be disabled, titled and styled. The applied preset stays highlighted and OnPresetSelect reports it; a preset breaking the calendar's restrictions is rejected, not clamped.

Selected: - → -
Last selected preset: -


October 2026
S
M
T
W
T
F
S

Min & Max

MinDate/MaxDate bound the calendar; DisablePast/DisableFuture do the same with today (the narrower bound wins). MinRange/MaxRange bound the selection's length: once the start is picked, days that would make it too short or too long are disabled, and MaxRange also limits the time spinners.
Min: Now.AddDays(-5)
Max: Now.AddDays(+5)


Min: Now.AddMonths(-2)
Max: Now.AddMonths(+1)


Min: Now.AddYears(-5)
Max: Now.AddYears(+1)


DisablePast:


DisableFuture:


MaxRange: 2 days, 4 hours and 30 minutes


MaxRange: 6 hours (shorter than a day, so the range stays on the day it starts on)


MinRange: 3 days (a stay of at least 3 nights)


MinRange: 2 days & MaxRange: 7 days

Disabled dates

DisabledDaysOfWeek (recurring), DisabledDates (a list) and IsDateDisabled (a predicate) block days from being a start or an end; a range still spans over them unless ExcludeDisabledDates is set, which also disables every day the range could only reach by covering one.

DisabledDaysOfWeek: weekends


DisabledDates: an explicit list of blackout days


IsDateDisabled: every day before today


ExcludeDisabledDates: the range cannot reach past a blackout day

Highlighted dates

HighlightedDates marks days without disabling them; GetDayClass adds a CSS class of your own to any day, to color-code the calendar from application data.
HighlightedDates: the next three days


GetDayClass: paints every Friday

Calendar layout

Grid: FirstDayOfWeek, ShowOutsideDays, FixedWeeks (always six rows), WeekNumberRule, Today (override the current date) and HighlightToday (paint only; screen readers still hear it). Chrome: ShowMonthPickerAsOverlay (month picker behind the title), ShowGoToToday and ShowCloseButton.














Multiple months

MonthCount shows up to three months side by side; the preview, selection and arrow keys flow across them, and a narrow viewport falls back to one. PagedNavigation moves a whole page at a time.







Selected: - → -


October 2026
S
M
T
W
T
F
S
November 2026
S
M
T
W
T
F
S

Time picker

ShowTimePicker adds a start and an end time. TimeFormat picks the 24- or 12-hour clock; HourStep/MinuteStep snap the spin buttons to a grid; holding a button repeats after ContinuousSpinDelay, every ContinuousSpinInterval. ShowTimePickerAsOverlay puts the times behind a toggle, as a narrow callout does on its own.






Formatting

DateFormat formats (and parses) each date - by default the culture's short date, plus the time with ShowTimePicker. ValueFormat joins them: {0} is the start, {1} the end. NoDateText replaces the --- of a date not picked yet.






Text input

AllowTextInput makes the field editable. Text must follow ValueFormat and DateFormat; --- leaves an end open and a reversed pair is swapped. Typed ranges obey every calendar restriction (see Validation for the messages).




A typed range longer than the 7-day MaxRange is rejected as invalid:

Binding

The value of the component is a BitDateRangePickerValue holding a nullable StartDate and EndDate, so a half-picked range is representable. Use @bind-Value for two-way binding, or DefaultValue together with the OnChange callback for the uncontrolled mode.

From: 1/17/2020 12:00:00 AM +02:00
To: 1/25/2020 12:00:00 AM +02:00

Apply & Cancel

AutoApply="false" adds Cancel and Apply buttons: the range the callout opened on is restored unless Apply commits the new one (Escape, the overlay or the close button roll back too). Apply is disabled while the range is half-picked. OnApply/OnCancel report the outcome; ApplyButtonText/CancelButtonText word the buttons. Picks still reach Value while open.

Committed value: - to -
Last outcome: -

Events

OnSelectDate fires on every pick with the range as it stands, so the half-picked range (a start date and no end date yet) is reported too. OnChange fires only once the value itself changes, OnMonthChange reports the month the calendar navigated to however it got there (buttons, keyboard or a selection), OnClear follows the clear button, and OnOpen/OnClose bracket the callout.



Culture

Culture (the current UI culture by default) drives the calendar system, month and day names, first day of the week, AM/PM designators and text direction. See CultureInfoHelper (opens in a new tab) for building a custom one.



TimeZone

TimeZone is the zone the dates are shown and produced in, instead of the local one. Time-zone data depends on the OS and on settings such as InvariantTimezone (more info(opens in a new tab)).

Default (local TimeZone):


Selected date range: from - to -




"Dateline Standard Time" TimeZone:


Selected date range: from - to -

Standalone

Standalone renders the calendar inline, without the field and callout - for filter panels and dashboards. Everything else behaves as in the drop-down.
October 2026
S
M
T
W
T
F
S


October 2026
S
M
T
W
T
F
S


October 2026
S
M
T
W
T
F
S
39
40
41
42
43


October 2026
S
M
T
W
T
F
S


S
M
T
W
T
F
S
:
:

ReadOnly

ReadOnly keeps the calendar opening and browsable but blocks every change: the days, presets and time spinners stop reacting to the pointer, typed text is ignored and the clear button is hidden. Unlike Disabled, the value is still submitted with the form.




Selected date range Start: 12/8/2024 - End: 12/12/2024
December 2024
S
M
T
W
T
F
S


Selected date range Start: 12/8/2024 12:15 - End: 12/12/2024 16:45
S
M
T
W
T
F
S
:
:

Templates

LabelTemplate and IconTemplate replace the label and the field's icon; DayCellTemplate, MonthCellTemplate and YearCellTemplate render a calendar cell from its date (or year); CalloutHeaderTemplate and CalloutFooterTemplate frame the callout.












Responsive

Responsive turns the callout into a full-width, swipe-to-dismiss panel with touch-sized cells on small screens.

Validation

Inside an EditForm the picker takes part in data-annotations validation like any input; a custom attribute holds the range rules the calendar cannot express. Typed text is also checked against the calendar's own restrictions, each failure with its own message: InvalidErrorMessage (unreadable), DisabledDateErrorMessage (a blocked day) and OutOfRangeErrorMessage (bounds or min/max length).





Type a weekend into the field below to see the blocked-day message, and a range longer than 7 days to see the out-of-range one:

Accessibility

The field is a combobox opening a modal dialog; focus moves in on open, is trapped while open and returns to the field on close. Each calendar is a grid with a single tab stop.

Field: ArrowDown opens. Day grid: arrows move by a day or a week, Home/End to the week's ends, PageUp/PageDown by a month (Shift: a year), Enter/Space picks, Escape closes; disabled days are skipped and the arrows preview the range as the pointer does. Month and year grids take the same keys. Time picker: PageUp/PageDown step by HourStep/MinuteStep.

Every text read by a screen reader is a parameter (AriaLabel, CalloutAriaLabel, PresetsAriaLabel, the …Title and …AriaLabel texts, and SelectedDateAriaAtomic for the live announcement), so it localizes without resources. High Contrast mode and prefers-reduced-motion are honored.

Open state

@bind-IsOpen opens and closes the callout from anywhere on the page; a component reference offers OpenCallout and CloseCallout. Bound one way, IsOpen stops the picker closing itself - the page decides. OnOpen and OnClose report every change, whatever caused it.



The callout is closed





Cascading parameters

BitParams hands a BitDateRangePickerParams to every picker below it, so shared settings (culture, bounds, presets, look) are written once. They are defaults, not overrides: a parameter a picker sets itself keeps its own value.







Outside the cascade:

Color

Color sets the accent: today, the range and its ends, the selected preset, the highlighted current month, the active AM/PM button, the Apply button, the open field and every focus ring.














External Icons

Use icons from external libraries like FontAwesome, Material Icons, and Bootstrap Icons with the Icon parameter.


FontAwesome:






Bootstrap:






Navigation & ClearButton Icons (FontAwesome):





Navigation Icons (Bootstrap):

Size

Size scales the field, the label and the calendar cells together in one of three steps. The callout takes the size with it, so a small picker opens a small calendar.







October 2026
S
M
T
W
T
F
S

Style & Class

Style and Class reach the root; Styles and Classes reach every part (field, callout, grids, time picker buttons).


Component's Style & Class:





Styles & Classes:





The CSS variables cover what no parameter does. Set on :root, they re-skin every picker; set in Style, one picker - the field and the calendar it opens, which is copied the variables since it is rendered outside the root. Styles.Callout wins over that copy on the calendar.



RTL

Set Dir to BitDir.Rtl to render the DateRangePicker in a right-to-left layout. The calendar, the navigation buttons and the arrow-key navigation all mirror accordingly. A right-to-left Culture switches the direction on its own, so Dir is only needed to override it.

CSS variables

The public custom properties this component reads off its root, for what no parameter covers.

Every variable is read with a fallback and never declared by the component, so it inherits like any other custom property: set one on :root (or in a [bit-theme] block) to restyle every instance, on any ancestor to restyle the ones inside it, or on the Style of one instance to restyle that one alone. Leave a variable unset and the component falls back to the theme token beside it.

BitDateRangePicker CSS variables

Name Default value Description
--bit-DateRangePicker-color The Color role's main color The accent: the two ends of the selected range, today's cell, the selected preset, the active AM/PM button and the border of the field while the calendar is open.
--bit-DateRangePicker-text-color The Color role's on color Foreground of whatever the accent fills.
--bit-DateRangePicker-hover-color The Color role's hover color The accent while hovered.
--bit-DateRangePicker-active-color The Color role's active color The accent while pressed.
--bit-DateRangePicker-range-background The Color role's light color Background of the days between the two ends of the selected range.
--bit-DateRangePicker-preview-background --bit-clr-bg-sec Background of the range previewed while the pointer moves over the grid with only the start date picked.
--bit-DateRangePicker-focus-color The Color role's focus color Color of the focus ring, around the field and around every cell and button of the calendar. An invalid value overrides it with the error focus color, so the field never shows two states at once.
--bit-DateRangePicker-invalid-color --bit-clr-err Border and underline of the field while the value is invalid.
--bit-DateRangePicker-required-color --bit-clr-req Color of the asterisk after a required label.
--bit-DateRangePicker-disabled-color --bit-clr-fg-dis Text and glyphs of every disabled part, in the field and in the calendar alike.
--bit-DateRangePicker-input-height Per Size, --bit-siz-ctrl-sm/md/lg Height of the field.
--bit-DateRangePicker-input-font-size Per Size, from the type ramp Text size of the field.
--bit-DateRangePicker-input-color --bit-clr-fg-pri Text color of the field.
--bit-DateRangePicker-input-background --bit-clr-bg-pri Background of the field.
--bit-DateRangePicker-input-border-color --bit-clr-brd-pri Border of the field, and its underline in the Underlined variant.
--bit-DateRangePicker-input-border-width --bit-shp-border-width Border stroke of the field.
--bit-DateRangePicker-input-radius --bit-shp-radius-control Corner radius of the field.
--bit-DateRangePicker-icon-color --bit-clr-fg-sec Color of the calendar glyph inside the field.
--bit-DateRangePicker-label-color --bit-clr-fg-pri Color of the label.
--bit-DateRangePicker-label-font-size Per Size, from the type ramp Text size of the label.
--bit-DateRangePicker-label-font-weight --bit-tpg-field-label-font-weight Weight of the label.
--bit-DateRangePicker-callout-background --bit-clr-bg-pri Background of the calendar surface.
--bit-DateRangePicker-callout-radius --bit-shp-radius-popup Corner radius of the callout.
--bit-DateRangePicker-callout-shadow --bit-shd-popup Elevation of the callout.
--bit-DateRangePicker-calendar-padding 12px Padding around each pane of the callout: a month, the month/year picker and the presets column.
--bit-DateRangePicker-day-size Per Size, 24/28/34px Width and height of a day cell. The week numbers and the navigation buttons track it, so the whole calendar scales with this one value.
--bit-DateRangePicker-day-font-size Per Size, from the type ramp Text size of a day cell and of the weekday initials above it.
--bit-DateRangePicker-day-color --bit-clr-fg-pri Text color of a day cell.
--bit-DateRangePicker-day-radius --bit-shp-radius-control Corner radius of a day cell.
--bit-DateRangePicker-day-hover-background --bit-clr-bg-pri-hover Background of a hovered day and of a hovered navigation button.
--bit-DateRangePicker-today-radius --bit-shp-radius-full Corner radius of today's cell, which is a circle by default while the other days take the day radius.
--bit-DateRangePicker-range-radius --bit-shp-radius-lg Corner radius at the two ends of the selected range, which is what gives the range its pill shape. A range of a single day takes it on all four corners.
--bit-DateRangePicker-outside-day-color --bit-clr-fg-sec Color of the days of the adjacent months rendered by ShowOutsideDays.
--bit-DateRangePicker-highlighted-background --bit-clr-bg-ter Background of a day listed in HighlightedDates.
--bit-DateRangePicker-week-day-color --bit-clr-fg-pri Color of the row of weekday initials.
--bit-DateRangePicker-week-number-color --bit-clr-fg-sec Color of the week number column.
--bit-DateRangePicker-week-number-background --bit-clr-bg-sec Background of the week number column.
--bit-DateRangePicker-header-color --bit-clr-fg-pri Color of the month and year titles above the grids.
--bit-DateRangePicker-divider-color --bit-clr-brd-sec Color of the rules between the panes of the callout and beside the week numbers.
--bit-DateRangePicker-presets-width 112px Width of the presets column.
--bit-DateRangePicker-presets-max-height 320px Height the presets column scrolls in before it starts scrolling.

API

Every parameter, public member, sub-class and enum this component exposes.

BitDateRangePicker parameters

Name Type Default value Description
AllowTextInput bool false Whether or not the DateRangePicker allows string date inputs. A typed range is validated against every restriction the calendar enforces (MinDate, MaxDate, MinRange, MaxRange, the disabled days and ExcludeDisabledDates), so an out-of-bounds range is rejected as an invalid value.
AutoApply bool true Whether every pick is applied to the value as it is made. Turning it off makes the callout a transaction: it renders a Cancel and an Apply button and rolls the range back unless Apply commits it. It has no effect on a Standalone picker and it overrides AutoClose.
ApplyButtonText string Apply The text of the button that commits the picked range, rendered while AutoApply is off.
AutoClose bool true Whether the DateRangePicker closes automatically after selecting the second value.
AutoFocus bool false Whether the input of the picker gets the focus as soon as it renders for the first time. A standalone picker carries its value in a hidden input nobody is meant to land on, so it has nothing to place the focus on.
CancelButtonText string Cancel The text of the button that discards the picked range, rendered while AutoApply is off.
CalloutAriaLabel string Calendar Aria label of the DateRangePicker's callout for screen readers.
CalloutFooterTemplate RenderFragment? null Custom template to render at the bottom of the callout, below everything it holds.
CalloutHeaderTemplate RenderFragment? null Custom template to render at the top of the callout, above everything it holds.
CalloutHtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Capture and render additional html attributes for the DateRangePicker's callout.
Classes BitDateRangePickerClassStyles? null Custom CSS classes for different parts of the BitDateRangePicker.
ClearButtonIcon BitIconInfo? null The icon to display inside the clear button. Takes precedence over ClearButtonIconName when both are set.
ClearButtonIconName string? null The name of the clear button's icon from the built-in Fluent UI icon set.
ClearButtonTitle string Clear the selected date range The title and the aria-label of the clear button.
CloseButtonIcon BitIconInfo? null The icon to display inside the close button. Takes precedence over CloseButtonIconName when both are set.
CloseButtonIconName string? null The name of the close button's icon from the built-in Fluent UI icon set.
CloseButtonTitle string Close date range picker The title of the close button (tooltip).
Color BitColor? null The general color of the DateRangePicker that applies to the today day button, the selected range, the highlighted current month and the selected AM/PM buttons.
ContinuousSpinDelay int 400 The delay in milliseconds before the hour/minute starts changing continuously while an increase/decrease button of the time picker is held down.
ContinuousSpinInterval int 75 The interval in milliseconds between two consecutive changes while an increase/decrease button of the time picker is held down.
Culture CultureInfo? null CultureInfo for the DateRangePicker. If not set, CultureInfo.CurrentUICulture is used.
DateFormat string? null The format of each of the two dates in the DateRangePicker. Defaults to the short date pattern of the Culture, extended with the time pattern when ShowTimePicker is enabled.
DayCellTemplate RenderFragment<DateTimeOffset>? null Custom template to render the day cells of the DateRangePicker.
DisableFuture bool false Disables every day after today, exactly as a MaxDate of today would. When both are set, the earlier of the two bounds wins.
DisablePast bool false Disables every day before today, exactly as a MinDate of today would. When both are set, the later of the two bounds wins.
DisabledDates IEnumerable<DateTimeOffset>? null The list of dates that are disabled (not selectable) in the DateRangePicker, in addition to MinDate and MaxDate.
DisabledDaysOfWeek IEnumerable<DayOfWeek>? null The days of the week that are disabled (not selectable) in the DateRangePicker (e.g. weekends).
DisabledDateErrorMessage string? null The custom validation error message for a typed range that lands on a day blocked by DisabledDates, DisabledDaysOfWeek or IsDateDisabled, told apart from a range that merely breaks the bounds.
DropDirection BitDropDirection BitDropDirection.TopAndBottom Determines the allowed drop directions of the callout.
EndTimeDecreaseHourIcon BitIconInfo? null The icon to display inside the end time-picker's decrease-hour button. Takes precedence over EndTimeDecreaseHourIconName when both are set.
EndTimeDecreaseHourIconName string? null The name of the end time-picker's decrease-hour button icon from the built-in Fluent UI icon set.
EndTimeDecreaseHourTitle string Decrease end hour The title and the aria-label of the end time-picker's decrease-hour button.
EndTimeDecreaseMinuteIcon BitIconInfo? null The icon to display inside the end time-picker's decrease-minute button. Takes precedence over EndTimeDecreaseMinuteIconName when both are set.
EndTimeDecreaseMinuteIconName string? null The name of the end time-picker's decrease-minute button icon from the built-in Fluent UI icon set.
EndTimeDecreaseMinuteTitle string Decrease end minute The title and the aria-label of the end time-picker's decrease-minute button.
EndTimeHourInputAriaLabel string End hour The aria-label of the end time-picker's hour input.
EndTimeIncreaseHourIcon BitIconInfo? null The icon to display inside the end time-picker's increase-hour button. Takes precedence over EndTimeIncreaseHourIconName when both are set.
EndTimeIncreaseHourIconName string? null The name of the end time-picker's increase-hour button icon from the built-in Fluent UI icon set.
EndTimeIncreaseHourTitle string Increase end hour The title and the aria-label of the end time-picker's increase-hour button.
EndTimeIncreaseMinuteIcon BitIconInfo? null The icon to display inside the end time-picker's increase-minute button. Takes precedence over EndTimeIncreaseMinuteIconName when both are set.
EndTimeIncreaseMinuteIconName string? null The name of the end time-picker's increase-minute button icon from the built-in Fluent UI icon set.
EndTimeIncreaseMinuteTitle string Increase end minute The title and the aria-label of the end time-picker's increase-minute button.
EndTimeMinuteInputAriaLabel string End minute The aria-label of the end time-picker's minute input.
ExcludeDisabledDates bool false Whether the disabled days are excluded from the selected range. By default a range simply spans over the disabled days between its two ends. When enabled, once the start date is picked every day whose range would contain a disabled day becomes unselectable.
FirstDayOfWeek DayOfWeek? null Overrides the first day of the week in the day picker. If not set, the first day of the week of the Culture is used.
FixedWeeks bool false Whether the day picker should always render six weeks, filling the extra rows with the days of the adjacent months, to keep the calendar height fixed while navigating between months.
GetDayClass Func<DateTimeOffset, string?>? null Custom function to provide additional CSS classes for each day button of the DateRangePicker.
GoToNextMonthTitle string Go to next month The title of the Go to next month button (tooltip).
GoToNextYearRangeTitle string Next year range {0} - {1} The title of the Go to next year range button (tooltip).
GoToNextYearTitle string Go to next year {0} The title of the Go to next year button (tooltip).
GoToPrevMonthTitle string Go to previous month The title of the Go to previous month button (tooltip).
GoToPrevYearRangeTitle string Previous year range {0} - {1} The title of the Go to previous year range button (tooltip).
GoToPrevYearTitle string Go to previous year {0} The title of the Go to previous year button (tooltip).
GoToTodayIcon BitIconInfo? null The icon to display inside the GoToToday button. Takes precedence over GoToTodayIconName when both are set.
GoToTodayIconName string? null The name of the GoToToday button's icon from the built-in Fluent UI icon set.
GoToTodayTitle string Go to today The title of the GoToToday button (tooltip).
HasBorder bool true Determines if the DateRangePicker has a border.
HighlightCurrentMonth bool false Whether the month picker should highlight the current month.
HighlightToday bool true Whether the day picker highlights today's cell. It only affects the paint: the cell still reports itself as the current date to assistive technologies.
HighlightedDates IEnumerable<DateTimeOffset>? null The list of dates that are highlighted (marked) in the day picker of the DateRangePicker.
HighlightSelectedMonth bool false Whether the month picker should highlight the selected month.
HideTimePickerIcon BitIconInfo? null The icon to display inside the HideTimePicker button. Takes precedence over HideTimePickerIconName when both are set.
HideTimePickerIconName string? null The name of the HideTimePicker button's icon from the built-in Fluent UI icon set.
HideTimePickerTitle string Hide time picker The title of the HideTimePicker button (tooltip).
HourStep int 1 The step, in hours, the spin buttons move the hour by. A step greater than 1 lays a grid over the day, starting at midnight, that every hour the buttons produce sits on. A time entered as text is not held to it.
Icon BitIconInfo? null The icon to display. Takes precedence over IconName when both are set. Use for external libraries (e.g. BitIconInfo.Fa("solid calendar"), BitIconInfo.Bi("calendar3"), BitIconInfo.Css("my-class")).
IconPlacement BitPlacement BitPlacement.End Determines the side of the input the DateRangePicker's icon is rendered on. Only Start and End are honoured; any other value leaves the icon on the end side. The side follows the reading direction: Start is the left of an LTR input and the right of an RTL one.
IconName string? CalendarMirrored The name of the icon from the built-in Fluent UI icon set. For external icon libraries, use Icon instead.
IconTemplate RenderFragment? null Custom template for the DateRangePicker's icon.
InvalidErrorMessage string? null The custom validation error message for the invalid value.
IsDateDisabled Func<DateTimeOffset, bool>? null Custom function to determine if a specific date is disabled (not selectable) in the DateRangePicker.
IsMonthPickerVisible bool true Whether the month picker is shown or hidden.
IsOpen bool false Whether or not the DateRangePicker's callout is open.
Label string? null The text of the DateRangePicker's label.
LabelTemplate RenderFragment? null Custom template for the DateRangePicker's label.
MaxDate DateTimeOffset? null The maximum date allowed for the DateRangePicker.
MaxRange TimeSpan? null The longest span the selected range is allowed to cover. The day grid is bounded by it in whole days, equally far either side of the picked start date, and the time picker refuses a time that would push the span past it - so a MaxRange shorter than a day leaves the day the range started on as the only one it can end on.
MinDate DateTimeOffset? null The minimum date allowed for the DateRangePicker.
MinRange TimeSpan? null The minimum number of days that the selected range must span in the DateRangePicker. Only the days part of the provided TimeSpan is considered.
MinuteStep int 1 The step, in minutes, the spin buttons move the minute by. A step greater than 1 lays a grid over the hour, starting at the top of it, that every minute the buttons produce sits on - which is what turns it into a five-minute or quarter-hour picker. A time entered as text is not held to it.
MonthCellTemplate RenderFragment<DateTimeOffset>? null Custom template to render the month cells of the DateRangePicker.
MonthCount int 1 The number of consecutive months rendered side by side in the day picker (1 to 3), which makes picking a range that spans two months a single move. It falls back to a single month whenever the viewport is not wide enough to fit them all.
MonthPickerToggleTitle string {0}, change month The title of the month picker's toggle (tooltip).
NextMonthNavIcon BitIconInfo? null The icon to display inside the next-month navigation button. Takes precedence over NextMonthNavIconName when both are set.
NextMonthNavIconName string? null The name of the next-month navigation button's icon from the built-in Fluent UI icon set.
NextYearNavIcon BitIconInfo? null The icon to display inside the next-year navigation button. Takes precedence over NextYearNavIconName when both are set.
NextYearNavIconName string? null The name of the next-year navigation button's icon from the built-in Fluent UI icon set.
NextYearRangeNavIcon BitIconInfo? null The icon to display inside the next-year-range navigation button. Takes precedence over NextYearRangeNavIconName when both are set.
NextYearRangeNavIconName string? null The name of the next-year-range navigation button's icon from the built-in Fluent UI icon set.
NoDateText string --- The text rendered in place of a date that has not been picked yet, which is also the token accepted back for an open-ended range when AllowTextInput is enabled.
OnApply EventCallback<BitDateRangePickerValue?> The callback for when the picked range is committed by the Apply button of a picker that does not AutoApply.
OnCancel EventCallback The callback for when the picked range is discarded by the Cancel button of a picker that does not AutoApply. A callout dismissed any other way rolls the range back just the same, but reports itself through OnClose alone.
OnClear EventCallback Callback for when the value is cleared using the clear button.
OnClick EventCallback The callback for clicking on the DateRangePicker's input.
OnClose EventCallback Callback for when the callout is closed.
OnFocus EventCallback The callback for focusing the DateRangePicker's input.
OnFocusIn EventCallback The callback for when the focus moves into the DateRangePicker's input.
OnFocusOut EventCallback The callback for when the focus moves out of the DateRangePicker's input.
OnMonthChange EventCallback<DateTimeOffset> Callback for when the displayed month of the day picker changes. The argument is the first day of the newly displayed month.
OnOpen EventCallback Callback for when the callout is opened.
OnPresetSelect EventCallback<BitDateRangePickerPreset> The callback for when a preset is selected. The argument is the selected preset.
PagedNavigation bool false Whether the previous and next navigation buttons move the calendar by all of its rendered months instead of one, so consecutive pages of a multi-month calendar never overlap. It has no effect when MonthCount renders a single month.
OnSelectDate EventCallback<BitDateRangePickerValue?> The callback for when the user picks a day in the calendar, reporting the range as it stands after the pick - so a range with only its start date set, while the second day is still to be chosen, is reported too.
OutOfRangeErrorMessage string? null The custom validation error message for a range entered as text that breaks the bounds, the disabled days, or MinRange and MaxRange. Text that does not read as a range at all reports InvalidErrorMessage instead.
Placeholder string string.Empty The placeholder text of the DateRangePicker's input.
Presets IEnumerable<BitDateRangePickerPreset>? null The list of shortcuts, rendered next to the calendar, that fill the DateRangePicker with a predefined range (e.g. "Last 7 days").
PresetsAriaLabel string Predefined date ranges The aria label of the presets' container for screen readers.
PrevMonthNavIcon BitIconInfo? null The icon to display inside the previous-month navigation button. Takes precedence over PrevMonthNavIconName when both are set.
PrevMonthNavIconName string? null The name of the previous-month navigation button's icon from the built-in Fluent UI icon set.
PrevYearNavIcon BitIconInfo? null The icon to display inside the previous-year navigation button. Takes precedence over PrevYearNavIconName when both are set.
PrevYearNavIconName string? null The name of the previous-year navigation button's icon from the built-in Fluent UI icon set.
PrevYearRangeNavIcon BitIconInfo? null The icon to display inside the previous-year-range navigation button. Takes precedence over PrevYearRangeNavIconName when both are set.
PrevYearRangeNavIconName string? null The name of the previous-year-range navigation button's icon from the built-in Fluent UI icon set.
Responsive bool false Enables the responsive mode in small screens.
SelectedDateAriaAtomic string Selected date range {0} The aria-atomic live text announcing the currently selected date range, formatted with the value of the input.
ShowClearButton bool false Whether the clear button should be shown or not when the DateRangePicker has a value.
ShowCloseButton bool false Whether the DateRangePicker's close button should be shown or not.
ShowGoToToday bool true Whether the GoToToday button should be shown or not.
ShowMonthPickerAsOverlay bool false Show month picker on top of date range picker when visible.
ShowOutsideDays bool true Whether the days of the previous and next months, filling the first and last week rows, should be rendered.
ShowTimePicker bool false Whether or not render the time-picker.
ShowTimePickerAsOverlay bool false Show the time picker on top of the date range picker when visible.
ShowTimePickerIcon BitIconInfo? null The icon to display inside the ShowTimePicker button. Takes precedence over ShowTimePickerIconName when both are set.
ShowTimePickerIconName string? null The name of the ShowTimePicker button's icon from the built-in Fluent UI icon set.
ShowTimePickerTitle string Show time picker The title of the ShowTimePicker button (tooltip).
ShowWeekNumbers bool false Whether the week number (weeks 1 to 53) should be shown before each week row.
Standalone bool false Whether the DateRangePicker is rendered standalone or with the input component and callout.
StartingValue BitDateRangePickerValue? null Specifies the date and time of the date and time picker when it is opened without any selected value.
Size BitSize? null Sets the preset size (Small, Medium, Large) of the field, the calendar cells and the label. The callout takes the size with it.
StartTimeDecreaseHourIcon BitIconInfo? null The icon to display inside the start time-picker's decrease-hour button. Takes precedence over StartTimeDecreaseHourIconName when both are set.
StartTimeDecreaseHourIconName string? null The name of the start time-picker's decrease-hour button icon from the built-in Fluent UI icon set.
StartTimeDecreaseHourTitle string Decrease start hour The title and the aria-label of the start time-picker's decrease-hour button.
StartTimeDecreaseMinuteIcon BitIconInfo? null The icon to display inside the start time-picker's decrease-minute button. Takes precedence over StartTimeDecreaseMinuteIconName when both are set.
StartTimeDecreaseMinuteIconName string? null The name of the start time-picker's decrease-minute button icon from the built-in Fluent UI icon set.
StartTimeDecreaseMinuteTitle string Decrease start minute The title and the aria-label of the start time-picker's decrease-minute button.
StartTimeHourInputAriaLabel string Start hour The aria-label of the start time-picker's hour input.
StartTimeIncreaseHourIcon BitIconInfo? null The icon to display inside the start time-picker's increase-hour button. Takes precedence over StartTimeIncreaseHourIconName when both are set.
StartTimeIncreaseHourIconName string? null The name of the start time-picker's increase-hour button icon from the built-in Fluent UI icon set.
StartTimeIncreaseHourTitle string Increase start hour The title and the aria-label of the start time-picker's increase-hour button.
StartTimeIncreaseMinuteIcon BitIconInfo? null The icon to display inside the start time-picker's increase-minute button. Takes precedence over StartTimeIncreaseMinuteIconName when both are set.
StartTimeIncreaseMinuteIconName string? null The name of the start time-picker's increase-minute button icon from the built-in Fluent UI icon set.
StartTimeIncreaseMinuteTitle string Increase start minute The title and the aria-label of the start time-picker's increase-minute button.
StartTimeMinuteInputAriaLabel string Start minute The aria-label of the start time-picker's minute input.
Styles BitDateRangePickerClassStyles? null Custom CSS styles for different parts of the BitDateRangePicker.
TimeFormat BitTimeFormat BitTimeFormat.TwentyFourHours Time format of the time-pickers, 24H or 12H.
TimeZone TimeZoneInfo? null TimeZone for the DateRangePicker.
Today DateTimeOffset? null Overrides the date considered as today by the DateRangePicker, which is DateTimeOffset.Now by default.
Underlined bool false Whether or not the Text field of the DateRangePicker is underlined.
ValueFormat string Start: {0} - End: {1} The string format used to show the DateRangePicker's value in its input, where {0} is the start date and {1} is the end date. It is also the template used to parse the typed text back when AllowTextInput is enabled.
WeekNumberRule CalendarWeekRule? null The rule used to calculate the week numbers. If not set, CalendarWeekRule.FirstFullWeek is used.
WeekNumbersHeaderTitle string Week The accessible name of the empty header cell above the week numbers column.
WeekNumberTitle string Week number {0} The title of the week number (tooltip).
YearCellTemplate RenderFragment<int>? null Custom template to render the year cells of the DateRangePicker.
YearPickerToggleTitle string {0}, change year The title of the year picker's toggle (tooltip).
YearRangePickerToggleTitle string {0} - {1}, change month The title of the year range picker's toggle (tooltip).

BitInputBase parameters

Name Type Default value Description
DefaultValue TValue? null The default value of the input to be used in uncontrolled mode (i.e. when the Value is not bound), typically used alongside the OnChange callback.
DisplayName string? null Gets or sets the display name for this field.
InputHtmlAttributes IReadOnlyDictionary<string, object>? null Gets or sets a collection of additional attributes that will be applied to the created element.
Name string? null Gets or sets the name of the element. Allows access by name from the associated form.
NoValidate bool false Disables the validation of the input.
OnChange EventCallback<TValue?> Callback for when the input value changes.
ReadOnly bool false Makes the input read-only.
Required bool false Makes the input required.
Value TValue? null Gets or sets the value of the input. This should be used with two-way binding.

BitInputBase public members

Name Type Default value Description
InputElement ElementReference The ElementReference of the input element.
FocusAsync() () => ValueTask Gives focus to the input element.
FocusAsync(bool preventScroll) (bool preventScroll) => ValueTask Gives focus to the input element.

BitComponentBase parameters

Name Type Default value Description
AriaLabel string? null Gets or sets the accessible label for the component, used by assistive technologies.
Class string? null Gets or sets the CSS class name(s) to apply to the rendered element.
Dir BitDir? null Gets or sets the text directionality for the component's content.
Disabled bool false Gets or sets a value indicating whether the component is disabled and cannot respond to user interaction.
ForceAnimation bool false Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested.
HtmlAttributes Dictionary<string, object> new Dictionary<string, object>() Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters.
Id string? null Gets or sets the unique identifier for the component's root element.
Style string? null Gets or sets the CSS style string to apply to the rendered element.
TabIndex string? null Gets or sets the tab order index for the component when navigating with the keyboard.
Visibility BitVisibility BitVisibility.Visible Gets or sets the visibility state (visible, hidden, or collapsed) of the component.

BitComponentBase public members

Name Type Default value Description
UniqueId Guid Guid.NewGuid() Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed.
RootElement ElementReference Gets the reference to the root HTML element associated with this component.

BitDateRangePickerValue properties

Name Type Default value Description
StartDate DateTimeOffset? null Indicates the beginning of the date range.
EndDate DateTimeOffset? null Indicates the end of the date range.

BitDateRangePickerPreset properties

Name Type Default value Description
Text string The text of the preset's button.
Value BitDateRangePickerValue? null The range applied when the preset is selected. ValueProvider takes precedence over this when both are set.
ValueProvider Func<BitDateRangePickerValue?>? null Custom function providing the range applied when the preset is selected. Unlike Value it is evaluated on each selection, which keeps relative ranges (e.g. "Last 7 days") correct no matter how long the page has been open.
IsDisabled bool false Whether the preset's button is disabled.
Title string? null The title of the preset's button (tooltip).
Class string? null Custom CSS class for the preset's button.
Style string? null Custom CSS style for the preset's button.

BitDateRangePickerClassStyles properties

Name Type Default value Description
Root string? null Custom CSS classes/styles for the root element of the BitDateRangePicker.
ActionsContainer string? null Custom CSS classes/styles for the actions row the Apply and Cancel buttons of a picker that does not AutoApply are laid out in.
ApplyButton string? null Custom CSS classes/styles for the Apply button of a picker that does not AutoApply.
CancelButton string? null Custom CSS classes/styles for the Cancel button of a picker that does not AutoApply.
Focused string? null Custom CSS classes/styles for the focused state of the BitDateRangePicker.
Label string? null Custom CSS classes/styles for the Label of the BitDateRangePicker.
InputWrapper string? null Custom CSS classes/styles for the input wrapper of the BitDateRangePicker.
InputContainer string? null Custom CSS classes/styles for the input container of the BitDateRangePicker.
Input string? null Custom CSS classes/styles for the input of the BitDateRangePicker.
ClearButton string? null Custom CSS classes/styles for the clear button of the BitDateRangePicker.
ClearButtonIcon string? null Custom CSS classes/styles for the clear button icon of the BitDateRangePicker.
Icon string? null Custom CSS classes/styles for the icon of the BitDateRangePicker.
Overlay string? null Custom CSS classes/styles for the overlay of the BitDateRangePicker.
Callout string? null Custom CSS classes/styles for the callout of the BitDateRangePicker. Applied after the --bit-DateRangePicker-* variables copied from Style and Styles.Root, so it wins over them.
CalloutContainer string? null Custom CSS classes/styles for the callout container of the BitDateRangePicker.
CalloutHeader string? null Custom CSS classes/styles for the callout header, the container of the CalloutHeaderTemplate.
CalloutFooter string? null Custom CSS classes/styles for the callout footer, the container of the CalloutFooterTemplate.
Group string? null Custom CSS classes/styles for the group of the BitDateRangePicker.
PresetsContainer string? null Custom CSS classes/styles for the presets' container of the BitDateRangePicker.
PresetButton string? null Custom CSS classes/styles for each preset button of the BitDateRangePicker.
SelectedPresetButton string? null Custom CSS classes/styles for the currently selected preset button of the BitDateRangePicker.
DayPickerWrapper string? null Custom CSS classes/styles for the day-picker's wrapper of the BitDateRangePicker.
DayPickerHeader string? null Custom CSS classes/styles for the day-picker's header of the BitDateRangePicker.
DayPickerMonth string? null Custom CSS classes/styles for the day-picker's month of the BitDateRangePicker.
DayPickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the day-picker's nav buttons of the BitDateRangePicker.
PrevMonthNavButton string? null Custom CSS classes/styles for the Go to previous month button of the BitDateRangePicker.
PrevMonthNavIcon string? null Custom CSS classes/styles for the Go to previous month icon of the BitDateRangePicker.
GoToTodayButton string? null Custom CSS classes/styles for the Go to today button of the BitDateRangePicker.
GoToTodayIcon string? null Custom CSS classes/styles for the Go to today icon of the BitDateRangePicker.
CloseButton string? null Custom CSS classes/styles for the close button of the BitDateRangePicker.
CloseButtonIcon string? null Custom CSS classes/styles for the close button icon of the BitDateRangePicker.
NextMonthNavButton string? null Custom CSS classes/styles for the Go to next month button of the BitDateRangePicker.
NextMonthNavIcon string? null Custom CSS classes/styles for the Go to next month icon of the BitDateRangePicker.
DaysGrid string? null Custom CSS classes/styles for the days grid of the BitDateRangePicker.
DaysHeaderRow string? null Custom CSS classes/styles for the header row of the days of the BitDateRangePicker.
WeekNumbersHeader string? null Custom CSS classes/styles for the header cell of the week numbers column of the BitDateRangePicker.
WeekDayHeader string? null Custom CSS classes/styles for each day of the week header cell of the BitDateRangePicker.
DaysRow string? null Custom CSS classes/styles for each row of the days of the BitDateRangePicker.
WeekNumber string? null Custom CSS classes/styles for the week number of the BitDateRangePicker.
DayButton string? null Custom CSS classes/styles for each day button of the BitDateRangePicker.
HighlightedDayButton string? null Custom CSS classes/styles for the highlighted day buttons of the BitDateRangePicker.
HoveredDayButtons string? null Custom CSS classes/styles for the day buttons inside the prospective range being hovered in the BitDateRangePicker.
TodayDayButton string? null Custom CSS classes/styles for today day button of the BitDateRangePicker.
StartDayButton string? null Custom CSS classes/styles for selected start day button of the BitDateRangePicker.
SelectedDayButtons string? null Custom CSS classes/styles for selected day buttons of the BitDateRangePicker.
EndDayButton string? null Custom CSS classes/styles for selected end day button of the BitDateRangePicker.
StartAndEndSelectionDays string? null Custom CSS classes/styles for selected start and end day buttons of the BitDateRangePicker.
TimePickerWrapper string? null Custom CSS classes/styles for the time-picker's wrapper of the BitDateRangePicker.
TimePickerHeader string? null Custom CSS classes/styles for the time-picker's header of the BitDateRangePicker.
TimePickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the time-picker's nav buttons of the BitDateRangePicker.
ShowTimePickerButton string? null Custom CSS classes/styles for the show time-picker button of the BitDateRangePicker.
ShowTimePickerIcon string? null Custom CSS classes/styles for the show time-picker icon of the BitDateRangePicker.
HideTimePickerButton string? null Custom CSS classes/styles for the hide time-picker button of the BitDateRangePicker.
HideTimePickerIcon string? null Custom CSS classes/styles for the hide time-picker icon of the BitDateRangePicker.
TimeInputContainer string? null Custom CSS classes/styles for the time's input container of the BitDateRangePicker.
StartTimeInputContainer string? null Custom CSS classes/styles for the start time's input container of the BitDateRangePicker.
EndTimeInputContainer string? null Custom CSS classes/styles for the end time's input container of the BitDateRangePicker.
StartTimeHourInputContainer string? null Custom CSS classes/styles for the start time's hour input container of the BitDateRangePicker.
EndTimeHourInputContainer string? null Custom CSS classes/styles for the end time's hour input container of the BitDateRangePicker.
StartTimeMinuteInputContainer string? null Custom CSS classes/styles for the start time's minute input container of the BitDateRangePicker.
EndTimeMinuteInputContainer string? null Custom CSS classes/styles for the end time's minute input container of the BitDateRangePicker.
StartTimeHourInput string? null Custom CSS classes/styles for the start time's hour input of the BitDateRangePicker.
EndTimeHourInput string? null Custom CSS classes/styles for the end time's hour input of the BitDateRangePicker.
StartTimeMinuteInput string? null Custom CSS classes/styles for the start time's minute input of the BitDateRangePicker.
EndTimeMinuteInput string? null Custom CSS classes/styles for the end time's minute input of the BitDateRangePicker.
StartTimeHourMinuteSeparator string? null Custom CSS classes/styles for the start time's hour/minute separator of the BitDateRangePicker.
EndTimeHourMinuteSeparator string? null Custom CSS classes/styles for the end time's hour/minute separator of the BitDateRangePicker.
StartTimeIncreaseHourButton string? null Custom CSS classes/styles for the start time's increase hour button of the BitDateRangePicker.
StartTimeIncreaseHourIcon string? null Custom CSS classes/styles for the start time's increase hour icon of the BitDateRangePicker.
StartTimeDecreaseHourButton string? null Custom CSS classes/styles for the start time's decrease hour button of the BitDateRangePicker.
StartTimeDecreaseHourIcon string? null Custom CSS classes/styles for the start time's decrease hour icon of the BitDateRangePicker.
StartTimeIncreaseMinuteButton string? null Custom CSS classes/styles for the start time's increase minute button of the BitDateRangePicker.
StartTimeIncreaseMinuteIcon string? null Custom CSS classes/styles for the start time's increase minute icon of the BitDateRangePicker.
StartTimeDecreaseMinuteButton string? null Custom CSS classes/styles for the start time's decrease minute button of the BitDateRangePicker.
StartTimeDecreaseMinuteIcon string? null Custom CSS classes/styles for the start time's decrease minute icon of the BitDateRangePicker.
EndTimeIncreaseHourButton string? null Custom CSS classes/styles for the end time's increase hour button of the BitDateRangePicker.
EndTimeIncreaseHourIcon string? null Custom CSS classes/styles for the end time's increase hour icon of the BitDateRangePicker.
EndTimeDecreaseHourButton string? null Custom CSS classes/styles for the end time's decrease hour button of the BitDateRangePicker.
EndTimeDecreaseHourIcon string? null Custom CSS classes/styles for the end time's decrease hour icon of the BitDateRangePicker.
EndTimeIncreaseMinuteButton string? null Custom CSS classes/styles for the end time's increase minute button of the BitDateRangePicker.
EndTimeIncreaseMinuteIcon string? null Custom CSS classes/styles for the end time's increase minute icon of the BitDateRangePicker.
EndTimeDecreaseMinuteButton string? null Custom CSS classes/styles for the end time's decrease minute button of the BitDateRangePicker.
EndTimeDecreaseMinuteIcon string? null Custom CSS classes/styles for the end time's decrease minute icon of the BitDateRangePicker.
StartTimeAmPmContainer string? null Custom CSS classes/styles for the start time's Am Pm container of the BitDateRangePicker.
EndTimeAmPmContainer string? null Custom CSS classes/styles for the end time's Am Pm container of the BitDateRangePicker.
StartTimeAmButton string? null Custom CSS classes/styles for the start time's Am button of the BitDateRangePicker.
StartTimePmButton string? null Custom CSS classes/styles for the start time's Pm button of the BitDateRangePicker.
EndTimeAmButton string? null Custom CSS classes/styles for the end time's Am button of the BitDateRangePicker.
EndTimePmButton string? null Custom CSS classes/styles for the end time's Pm button of the BitDateRangePicker.
Divider string? null Custom CSS classes/styles for the main divider of the BitDateRangePicker.
YearMonthPickerWrapper string? null Custom CSS classes/styles for the year-month-picker's wrapper of the BitDateRangePicker.
MonthPickerHeader string? null Custom CSS classes/styles for the month-picker's header of the BitDateRangePicker.
YearPickerToggleButton string? null Custom CSS classes/styles for the year-picker's toggle button of the BitDateRangePicker.
MonthPickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the month-picker's nav buttons of the BitDateRangePicker.
PrevYearNavButton string? null Custom CSS classes/styles for the Go to previous year button of the BitDateRangePicker.
PrevYearNavIcon string? null Custom CSS classes/styles for the Go to previous year icon of the BitDateRangePicker.
NextYearNavButton string? null Custom CSS classes/styles for the Go to next year button of the BitDateRangePicker.
NextYearNavIcon string? null Custom CSS classes/styles for the Go to next year icon of the BitDateRangePicker.
MonthsContainer string? null Custom CSS classes/styles for the months container of the BitDateRangePicker.
MonthsRow string? null Custom CSS classes/styles for each row of the months of the BitDateRangePicker.
MonthButton string? null Custom CSS classes/styles for each month button of the BitDateRangePicker.
YearPickerHeader string? null Custom CSS classes/styles for the year-picker's header of the BitDateRangePicker.
MonthPickerToggleButton string? null Custom CSS classes/styles for the month-picker's toggle button of the BitDateRangePicker.
YearPickerNavWrapper string? null Custom CSS classes/styles for the wrapper of the year-picker nav buttons of the BitDateRangePicker.
PrevYearRangeNavButton string? null Custom CSS classes/styles for the Go to previous year-range button of the BitDateRangePicker.
PrevYearRangeNavIcon string? null Custom CSS classes/styles for the Go to previous year-range icon of the BitDateRangePicker.
NextYearRangeNavButton string? null Custom CSS classes/styles for the Go to next year-range button of the BitDateRangePicker.
NextYearRangeNavIcon string? null Custom CSS classes/styles for the Go to next year-range icon of the BitDateRangePicker.
YearsContainer string? null Custom CSS classes/styles for the years container of the BitDateRangePicker.
YearsRow string? null Custom CSS classes/styles for each row of the years of the BitDateRangePicker.
YearButton string? null Custom CSS classes/styles for each year button of the BitDateRangePicker.

BitIconInfo properties

Name Type Default value Description
Name string? null Gets or sets the name of the icon.
BaseClass string? null Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty.
Prefix string? null Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty.

BitColor enum

Name Value Description
Primary 0 Primary general color.
Secondary 1 Secondary general color.
Tertiary 2 Tertiary general color.
Info 3 Info general color.
Success 4 Success general color.
Warning 5 Warning general color.
SevereWarning 6 SevereWarning general color.
Error 7 Error general color.
PrimaryBackground 8 Primary background color.
SecondaryBackground 9 Secondary background color.
TertiaryBackground 10 Tertiary background color.
PrimaryForeground 11 Primary foreground color.
SecondaryForeground 12 Secondary foreground color.
TertiaryForeground 13 Tertiary foreground color.
PrimaryBorder 14 Primary border color.
SecondaryBorder 15 Secondary border color.
TertiaryBorder 16 Tertiary border color.

BitPlacement enum

Name Value Description
Top 0 The top edge.
Bottom 1 The bottom edge.
Start 2 The edge the reading direction starts from - the left in LTR, the right in RTL. On the vertical axis, which does not turn around, it is the top.
End 3 The edge the reading direction ends at - the right in LTR, the left in RTL. On the vertical axis, which does not turn around, it is the bottom.
Left 4 The left edge, in both reading directions.
Right 5 The right edge, in both reading directions.
Center 6 The middle of the axis, against neither edge.
TopAndBottom 7 Both edges of the block axis at once.
StartAndEnd 8 Both edges of the inline axis at once, following the reading direction the way Start and End do.

BitTimeFormat enum

Name Value Description
TwentyFourHours 0 Show time pickers in 24 hours format.
TwelveHours 1 Show time pickers in 12 hours format.

BitVisibility enum

Name Value Description
Visible 0 The content of the component is visible.
Hidden 1 The content of the component is hidden, but the space it takes on the page remains (visibility:hidden).
Collapsed 2 The component is hidden (display:none).

BitDir enum

Name Value Description
Ltr 0 Ltr (left to right) is to be used for languages that are written from the left to the right (like English).
Rtl 1 Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic).
Auto 2 Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element.

Feedback

Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.