> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.
# Days Of The Week – Design
> Days of the Weeks are form elements that allow users to select days of the week.
export const LiveCode = ({children, customHeight, clickToLoad, example, fullWidth, fullHeight, hideCodeInLiveCode, screenshot, screenshotOnly, showCode: showCodeProp}) => {
const SCREENSHOTS_BASE = "https://servicetitan.github.io/anvil2-docs-live-code/screenshots";
const STACKBLITZ_BASE = "https://stackblitz.com/github/servicetitan/anvil2-docs-live-code/tree/main/examples";
const [showCodeBlock, setShowCodeBlock] = useState(showCodeProp ?? false);
const [isLocalOverride, setIsLocalOverride] = useState(false);
useEffect(() => {
const examplePath = `/images/live-code-screenshots-tmp/${example}.png`;
fetch(examplePath, {
method: "HEAD"
}).then(r => {
if (r.ok) setIsLocalOverride(true);
}).catch(() => {});
}, [example]);
const screenshotBase = isLocalOverride ? "/images/live-code-screenshots-tmp" : SCREENSHOTS_BASE;
if (screenshotOnly) {
return
## Anatomy
The Days of the Week consists of ten primary elements that work together to allow users to select days of the week.
1. Label
2. First day of the week (in disabled state)
3. Second day of the week (in checked state)
4. Third day of the week (in checked state)
5. Fourth day of the week (in hovered state, with tooltip with full name)
6. Fifth day of the week (in unchecked state)
7. Sixth day of the week (in unchecked state)
8. Seventh day of the week (in disabled state)
9. Hint/error text (in errored state)
10. Description text
## Options
The Days of the Week supports configurable start date configurations to accommodate various week representation scenarios.
### Default start date
```tsx lines theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDays, setSelectedDays] = useState([]);
return (
);
}
export default App;
```
By default, Days of the Week starts the week on Sunday.
### Configured start date
```tsx lines theme={null}
import { DaysOfTheWeek } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDays, setSelectedDays] = useState([]);
return (
);
}
export default App;
```
This behavior is configurable. The first day of the week here is set to Monday.
## Behavior
The Days of the Week responds to user interaction with distinct visual states and responsive width behaviors.
### Visual States
#### Day States
Each day of the week can be unchecked, checked, or disabled. On hover, the day of the week displays the full name of the day.
```tsx lines theme={null}
import { DaysOfTheWeek, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDaysUnchecked, setSelectedDaysUnchecked] = useState(
[],
);
const [selectedDaysChecked, setSelectedDaysChecked] = useState([
1, 2, 3, 4, 5, 6, 7,
]);
const [selectedDaysDisabled, setSelectedDaysDisabled] = useState(
[],
);
return (
);
}
export default App;
```
### Responsive Behavior
Days of the Week shrinks to 328px wide and grows to a maximum of 748px wide.
```tsx lines theme={null}
import { DaysOfTheWeek, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDaysSmall, setSelectedDaysSmall] = useState([]);
const [selectedDaysLarge, setSelectedDaysLarge] = useState([]);
return (
);
}
export default App;
```
## Usage Guidelines
Use the Days of the Week when users need to select one or multiple days of the week within forms.
### When to Use
Use Days of the Week for selecting one or multiple days of the week within forms. Use for event-related scenarios that require selecting days of the week.
### How to Use
#### Accessible Labels
**Do**
Display the full day name on hover
**Don't**
Omit an accessible label for the day on hover
#### Abbreviation
```tsx lines theme={null}
import { DaysOfTheWeek, Flex } from "@servicetitan/anvil2";
import { useState } from "react";
function App() {
const [selectedDays, setSelectedDays] = useState([]);
return (
);
}
export default App;
```
**Do**
Use 2-letter abbreviations for day names (e.g., Mo, Tu, We)
```tsx lines theme={null}
import { ButtonToggle, Flex } from "@servicetitan/anvil2";
function App() {
return (
SunMonTueWedThuFriSatSundayMondayTuesdayWednesdayThursdayFridaySaturday
);
}
export default App;
```
**Don't**
Use three letter name abbreviations, or full day names with uneven widths.
## Content
Content within the Days of the Week should clearly communicate day selections through consistent abbreviations.
### How to abbreviate days of the week
* To keep interfaces clear and scannable, use two-letter abbreviations for days of the week (e.g., Mo, Tu, We). These are concise, easy to read at a glance, and align with how similar tools present this information.
* When possible, pair the abbreviation with a tooltip that shows the full day name on hover. This improves accessibility and helps avoid confusion, especially for less common abbreviations like "Tu" or "Th."
### Which day starts the week
* By default, weeks start on Sunday in the date recurrence picker. This setting is configurable from within the component.
## Keyboard Interaction
Users can navigate the Days of the Week using standard keyboard controls.
| Key | Interaction |
| -------------- | --------------------- |
| Space or Enter | Toggles checked state |
### Accessibility
Anvil provides most of the accessibility needs for Days of the Week out of the box, and only needs some additional considerations for library users.
For more guidance on form field labels and context, see [input field context association best practices](/docs/accessibility/labels-and-ctas#input-field-context-association).
