Available from v8.0.0
BB.InputDate
A SwiftUI view that displays a date input field with customizable appearance and behavior.
Platform availability: iOS 17.0+
When to use:
- Use BB.InputDate when collecting date values from users with optional range restrictions.
- Use BB.InputDate when you need a field-based date input that integrates with form layouts alongside other input components like BB.InputText or BB.InputAmount.
Import
import SwiftUI
import BackbaseDesignSystem
Visual reference
Default |
Error |
Disabled |
Readonly |
Focus |
|
API reference
BB.InputDate
BB.InputDate is a standardized date input component for SwiftUI applications. It supports various date range restrictions, error states, and helper text.
Initializers
init(date:placeholder:labelPrimaryText:labelSecondaryText:)
Creates a new date input view with the specified binding and optional labels.
|
Parameter |
Type |
Default |
Description |
|---|---|---|---|
|
date |
Binding<Date?> |
— |
Binding to the selected date |
|
placeholder |
String |
DesignSystem.Strings.InputDate.placeholder |
Placeholder text when no date is selected |
|
labelPrimaryText |
String? |
nil |
Primary label text above the input |
|
labelSecondaryText |
String? |
nil |
Secondary label text |
Methods
dateRange(_:) (ClosedRange)
Restricts the selectable dates within a closed range.
|
Parameter |
Type |
Description |
|---|---|---|
|
closed |
ClosedRange<Date>? |
The closed date range |
Returns: Self - A modified version of the input with the date range.
dateRange(_:) (ClosedRange Binding)
Restricts the selectable dates using a binding to a closed range.
|
Parameter |
Type |
Description |
|---|---|---|
|
closed |
Binding<ClosedRange<Date>?> |
Binding to the closed date range |
Returns: Self - A modified version of the input with the date range.
dateRange(_:) (PartialRangeFrom)
Restricts the selectable dates from a minimum date.
|
Parameter |
Type |
Description |
|---|---|---|
|
partialFrom |
PartialRangeFrom<Date>? |
The minimum date range |
Returns: Self - A modified version of the input with the date range.
dateRange(_:) (PartialRangeFrom Binding)
Restricts the selectable dates using a binding to a minimum date.
|
Parameter |
Type |
Description |
|---|---|---|
|
partialFrom |
Binding<PartialRangeFrom<Date>?> |
Binding to the minimum date range |
Returns: Self - A modified version of the input with the date range.
dateRange(_:) (PartialRangeThrough)
Restricts the selectable dates up to a maximum date.
|
Parameter |
Type |
Description |
|---|---|---|
|
partialThrough |
PartialRangeThrough<Date>? |
The maximum date range |
Returns: Self - A modified version of the input with the date range.
dateRange(_:) (PartialRangeThrough Binding)
Restricts the selectable dates using a binding to a maximum date.
|
Parameter |
Type |
Description |
|---|---|---|
|
partialThrough |
Binding<PartialRangeThrough<Date>?> |
Binding to the maximum date range |
Returns: Self - A modified version of the input with the date range.
dateStyle(_:)
Configures the date format style for displaying the selected date.
|
Parameter |
Type |
Description |
|---|---|---|
|
dateStyle |
Date.FormatStyle |
The format style for displaying dates |
Returns: Self - A modified version of the input with the date style.
errorText(_:)
Sets the error text using a binding.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
Binding<String?> |
Binding to the error message |
Returns: Self - A modified version of the input with error text.
helperText(_:)
Sets the helper text.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
String? |
Helper text to display below the input |
Returns: Self - A modified version of the input with helper text.
helperText(_:) (Binding)
Sets the helper text using a binding.
|
Parameter |
Type |
Description |
|---|---|---|
|
text |
Binding<String?> |
Binding to the helper text |
Returns: Self - A modified version of the input with helper text.
readOnly(_:)
Sets the read-only state.
|
Parameter |
Type |
Description |
|---|---|---|
|
isReadOnly |
Bool |
Whether the input is read-only |
Returns: Self - A modified version of the input with read-only state.
readOnly(_:) (Binding)
Sets the read-only state using a binding.
|
Parameter |
Type |
Description |
|---|---|---|
|
isReadOnly |
Binding<Bool> |
Binding to the read-only state |
Returns: Self - A modified version of the input with read-only state.
Configuration
|
Property |
Type |
Default |
|---|---|---|
|
date |
Binding<Date?> |
— |
|
placeholder |
String |
DesignSystem.Strings.InputDate.placeholder |
|
labelPrimaryText |
String? |
nil |
|
labelSecondaryText |
String? |
nil |
date
The date property binds to the optional date value selected by the user. This is a required parameter for the initializer.
@State private var selectedDate: Date? = nil
BB.InputDate(date: $selectedDate)
placeholder
The placeholder property displays hint text when no date is selected. Defaults to a localized "Select date" string.
BB.InputDate(date: $date, placeholder: "Choose a date")
labelPrimaryText
The labelPrimaryText property displays a primary label above the input field.
BB.InputDate(date: $date, labelPrimaryText: "Birth Date")
labelSecondaryText
The labelSecondaryText property displays secondary text next to the primary label.
BB.InputDate(date: $date,
labelPrimaryText: "Appointment",
labelSecondaryText: "(Required)")
Usage
Basic usage
Create a simple date input field.
import SwiftUI
import BackbaseDesignSystem
@State private var selectedDate: Date? = nil
var body: some View {
BB.InputDate(date: $selectedDate)
}
Common use cases
Date with range restriction
@State private var selectedDate: Date? = nil
@State private var errorMessage: String? = "Invalid date selected"
@State private var isReadOnly = false
var body: some View {
BB.InputDate(date: $selectedDate,
labelPrimaryText: "Select Date",
labelSecondaryText: "Choose a date within the next week")
.dateRange(Date.now...Date.now.addingTimeInterval(86400 * 7))
.errorText($errorMessage)
.helperText("Please choose a date within the next week.")
.readOnly(isReadOnly)
}
Custom date format
@State private var selectedDate: Date? = nil
var body: some View {
BB.InputDate(date: $selectedDate,
labelPrimaryText: "Select Date")
.dateStyle(.dateTime
.day()
.month(.wide)
.year())
}
States and variants
Normal state
The default state when the input is interactive but no date is selected.
Visual characteristics:
- Default border color
- Placeholder text visible
- Calendar icon displayed
Focused state
Active when the date picker is open.
Visual characteristics:
- Brand-colored border
- Date picker visible
Error state
Displayed when validation fails or an error message is set.
Visual characteristics:
- Danger-colored border
- Error text shown below the input
Disabled state
Applied when the input is not interactive.
Visual characteristics:
- Disabled border and text colors
- User interaction blocked
Read-only state
Applied when the input displays a date but does not accept changes.
Visual characteristics:
- Disabled background color
- Content is visible but not editable
Customization
Date range restriction
Restrict selectable dates to a specific range.
// Closed range (specific start and end)
BB.InputDate(date: $date)
.dateRange(startDate...endDate)
// From a minimum date
BB.InputDate(date: $date)
.dateRange(Date.now...)
// Up to a maximum date
BB.InputDate(date: $date)
.dateRange(...Date.now)
Date display format
Configure how the selected date is displayed.
BB.InputDate(date: $date)
.dateStyle(.dateTime.day().month(.wide).year())
Accessibility
This component can be configured with accessibility features at the integration level. Use the standard SwiftUI accessibility modifiers to ensure a fully accessible experience for all users.
Accessibility configuration
|
Modifier |
Description |
|---|---|
|
.accessibilityLabel(_:) |
Sets the accessibility label for screen readers |
|
.accessibilityHint(_:) |
Provides additional context for the action |
|
.accessibilityValue(_:) |
Sets the current value for the element |
Best practices
- Provide meaningful accessibility labels that describe the element's purpose.
- Use accessibility hints to provide additional context when needed.
- Ensure all interactive elements are accessible.
BB.InputDate()
.accessibilityLabel("Descriptive label")
.accessibilityHint("Additional context")
Dependencies
- External dependencies: None
- Internal dependencies: BackbaseDesignSystem
Design tokens
Component styling is applied automatically through the design system's theming infrastructure.
JSON tokens
This component uses the shared input tokens. Tokens are defined in defaultTokens.json, which is integrated in the bundle of the framework, and can be customized by providing your own theme JSON file.
Token groups used by InputDate:
- color/input/default: Default state background, border, placeholder, and value colors
- color/input/focused: Focused state border color
- color/input/error: Error state border color
- color/input/disabled: Disabled state colors
- color/input/read-only: Read-only state colors
Default state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Border |
theme.color.input.default.border |
{theme.color.border.default} |
|
Placeholder |
theme.color.input.default.placeholder |
{theme.color.foreground.support} |
|
Value |
theme.color.input.default.value |
{theme.color.foreground.default} |
Focused state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Border |
theme.color.input.focused.border |
{theme.color.border.brand} |
Error state tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Border |
theme.color.input.error.border |
{theme.color.border.danger} |
Dimension tokens:
|
Token |
JSON Path |
Default Value |
|---|---|---|
|
Corner Radius |
theme.radius.input.default |
8 |
|
Height |
theme.height.input.md |
44 |
|
Padding X |
theme.padding-x.input.md |
16 |
|
Padding Y |
theme.padding-y.input.md |
8 |
|
Border Width |
theme.border-width.input.default |
1 |
Semantic tokens
|
Token |
API Reference |
Description |
|---|---|---|
|
Default Border |
Theme.colors.border.default |
Default input border color |
|
Focused Border |
Theme.colors.border.brand |
Border color when focused |
|
Error Border |
Theme.colors.border.danger |
Border color in error state |
|
Placeholder |
Theme.colors.foreground.support |
Placeholder text color |
|
Value |
Theme.colors.foreground.default |
Selected date text color |
|
Icon |
Theme.colors.foreground.support |
Calendar icon color |
Localization
The following strings are available for localization:
|
Key |
Default Value |
Description |
|---|---|---|
|
DesignSystem.inputDate.accessibility.leadingIcon |
"Calendar icon" |
Accessibility label for calendar icon |
|
DesignSystem.inputDate.accessibility.trailingIcon |
"Clear" |
Accessibility label for clear button |
|
DesignSystem.inputDate.placeholder |
"Select date" |
Default placeholder text |
|
DesignSystem.inputDate.datePicker.doneButton |
"Done" |
Done button text in date picker |
To customize these strings, add the keys to your app's Localizable.strings file.
See also
- BB.InputText - Text input field component
- BB.InputAmount - Amount input field component
- BB.InputPassword - Password input field component