Year Picker
Year Pickers allow users to select a specific year.
Note
Our Year Picker utilizes a native iOS menu component to align with our Date Picker which provides a more familiar and expected date selection experience for our users. All behaviors and interactions follow the default native iOS guidelines.
Anatomy
- Input: Invokes the picker when tapped.
- Pill: Displays the selected year.
- Picker Allows selection of a single year.
- Selected Date: Signifies which year is currently selected.
Usage Guidance
When to Use
- When a year-only based date is needed.
- When selecting a date within a few years. Selecting dates far in the past or present may be hard to navigate for some users. When pickers open they default to the current year.
When to Consider Something Else
- Use the keyboard style Date Input when entering dates that are familiar to the user, like birthdays; or dates that are far out, beyond a few years.
- If a more granular determinate time frame is needed (ie. months, days, minutes, etc.) use either Date Picker or Time Picker instead.
- If an indeterminate time frame is needed use Date Input.
API Guidelines
Methods
Class name: LabeledYearPicker
Module name: UIComponentsPlugin
public init(
selection: Binding<Int?>,
calendar: Calendar = .init(identifier: .gregorian),
label: String,
helperText: String?,
context: Binding<SemanticContext>,
localizer: LocalizationAdapting,
contentInsetsOverride: EdgeInsets? = nil,
featureData: FeatureMetricsData
)Parameters
| Name | Description | Default values |
|---|---|---|
| selection | Optional year selected by the user. This parameter provides a means of passing back the user selection back to the features that are using this component. When the component loads, we display this as the current selection and fall back on the current year if this field does not have a value. | |
| calendar | The Calendar used as reference for dates. Defaults to Gregorian. | .init(identifier: .gregorian) |
| label | Label to be positioned above field, already localized. | |
| helperText | Helper text below field, already localized. | |
| context | SemanticContext of the field. | |
| localizer | Localizer for the field. | |
| contentInsetsOverride | Optional content insets, if not provided we default to the component’s internal padding. | nil |
| featureData | The feature name/context and the screen ID in which the component appears. |
Accessibility Guidelines
Coming soon!
Content Guidelines
- Labels for Year Pickers are written in the title case.
- Use helper text to instruct the user what the proper input may be.
- Use placeholder text only to provide examples of proper inputs. Never use placeholder text to help instruct users.
Note
Our Year Picker utilizes a native material dialog component to align with our Date Picker which provides a more familiar and expected date selection experience for our users. All behaviors and interactions follow the default material guidelines.
Anatomy
- Input: Invokes the picker when tapped.
- Pill: Displays the selected year.
- Picker Allows selection of a single year.
- Selected Date: Signifies which year is currently selected.
Usage Guidance
When to use
- When a year-only based date is needed.
- When selecting a date within a few years. Selecting dates far in the past or present may be hard to navigate for some users. When pickers open they default to the current year.
When to consider something else
- Use the keyboard style Date Inputwhen entering dates that are familiar to the user, like birthdays; or dates that are far out, beyond a few years.
- If a more granular determinate time frame is needed (ie. months, days, minutes, etc.) use either Date Picker or Time Picker instead.
- If an indeterminate time frame is needed use Date Input
API Guidelines
Coming soon…
Accessibility Guidelines
Coming soon…
Content Guidelines
- Labels for Year Pickers are written in the title case.
- Use helper text to instruct the user what the proper input may be.
- Use placeholder text only to provide examples of proper inputs. Never use placeholder text to help instruct users.
Can't Find What You Need?
Check out our FAQ section which may help you find the information you're looking for. For further information, contact the #ask-canvas-design or #ask-canvas-kitchannels on Slack.