With stroked button treatment ...
With secondary button treatment ...
This was created using a dropdown button that emulates a select because Webflow doesn't provide a native select with tiers.
To disable a select, provide a unique ID to its dds__form-control and include a script for this in the page settings > "Before <body> tag" section. Note that the disabled state will be seen when published but not in preview mode.
Functionality must be manually added through custom interactions.
Functionality must be manually added through custom interactions.
Typing within the date input doesn't show the date select modal. Click the calendar icon/button to open the date select modal.
When the date select modal opens, it initially shows the month and year that corresponds with the value in the date input field (defaults to this month and year if there is no value within the input).
In this example, the selected date is May 22, 2020, which was today's date when this component was created. The selected date value should correspond with the date input field, but in this example the input field was left in its default state to show the placeholder text (and placeholder text defaults to today's date). Feel free to populate the input with a preset value that matches your placeholder text or preselected date.
In this example, the first three dates within the modal are disabled. This is an optional state that creators can define (i.e. disable all dates within a specified range).
The chevron arrows < > at the top of the date select modal would advance one month at a time in the given direction, although this is not currently scripted. Feel free to add these interactions.
In this example, keyboard Tab may be used to cycle between dates (focus is the black border box), but in production keyboard arrow keys would be used per this accessible example.
To close the date select modal, click the calendar icon/button a second time (toggle), or select the Cancel button within the modal, or select any date within the modal (the date within the input field would then reflect the newly selected date).
Clicking anywhere outside of the date select modal would also close it, however there is no easy way to do this in Webflow.
This component is similar to the tech specs bar that was shown in product stacks, however this one is used to view and select values within a preset range. For example, the user selects how relevant a search result is to the applied filters.
The mouseover highlight shouldn't flicker as you move the cursor across the component, but there's no easy method to avoid this in Webflow.