Subtask Add
The Subtask Add section allows users to break down a main task into smaller, manageable subtasks. Each subtask can have its title, description, start and due dates, and completion status.
UI Components
Subtask Title Field
Element
Text input
Placeholder
Enter Subtask
Validation
Required
Users must enter the subtask name. This is the main identifier for the subtask.
Description Toggle
Element
Toggle or Expandable section
Label
Add Description
Optional
Yes
Clicking this expands a textarea input where users can enter additional information or notes about the subtask.
Start Date
Label
Start Date
Input Type
Date-time picker
Format
Month Day Hour: Minute AM/PM (e.g., July 21 11:59 AM)
Validation
Optional but recommended
Due Date
Label
Due Date
Input Type
Date-time picker
Format
Same as start date
Validation
Must not be earlier than the start date, should fall within the main task's date range
Action Buttons
Cancel Button
Function
Discards the subtask and removes the subtask input block
Style
Light border, rounded, "X" icon
Confirm Button
Function
Saves the subtask and adds it to the main task's subtask list
Style
Solid black button with checkmark icon
Validation
Only active if the subtask title is provided
Functional Flow
User Actions
- User clicks Add Subtask in the main task add screen
- A new subtask input block appears
- User fills in:
- Title
- (Optional) Description
- (Optional) Start & Due Dates
Button Actions
On clicking Confirm:
- Subtask is validated and added to a list
- Input fields reset if user wants to add another subtask
On clicking Cancel:
- The current subtask input block is removed
Validations
| Field | Rule |
|---|---|
| Title | Required, must be non-empty |
| Start Date | Optional, must be before or equal to the Due Date if selected |
| Due Date | Optional, must be after or equal to Start Date if selected |
| Description | Optional |