Skip to main content
Flowra
PricingCommunityFAQ
JoinStart with Flowra
  • PricingPlans, seats and payment
  • Frequently asked questionsEverything you have asked, in one place
  • Contact usWrite to the right team
  • CommunityKaro Studio, who make Flowra

For your team

  • Marketing teamsCampaigns from brief to launch
  • Product and dev teamsFeatures and bugs with full context
  • Design and content teamsBrief, files and delivery side by side
  • Operations teamsWork, documents and costs you can track
  • Sales and services teamsFrom meeting to contract and payment
  • Remote teamsOnline meeting to delivery, on your time

For your role

  • Project managersAction stories instead of chasing the team
  • Freelancers and consultantsFrom brief to contract and settlement

For your workflow

  • Meeting to actionMeeting decisions as trackable work
  • Actions with financial contextCosts next to the work that caused them
  • Actions with contract contextEvery commitment as trackable work
  • Brief to project deliveryEvery project step, one complete action
See all solutionsStart with FlowraJoin
++
Flowra design system

Fundamentals

PrinciplesVoice and writingCopy rules for each surfaceGlossaryRTL and languagesNumbers and datesAccessibility

Foundations

ColorDark modePrintingTypographySpacing and layoutRadius and shadowLayersMotionNotification soundKeyboard shortcutsIconsService logos

Components

ButtonsText fieldPickerDate and timeCheckboxRadioKeySegmented controlSliderMenu and sheetDialogCard and listTables and data listsBadge, pill, and switchTabs and filtersAvatarEmpty and loading statesProgress and stepsToastFloating helpNavigationPage headerAssistants

Patterns

Connector pageList, filter, and searchForm layoutCreation flowUpgrade promptConfirmation and irreversible actionsPhone layoutFixed bars and scrolling

Brand

Flowra brandMark and logoBrand colorBrand typographyMisuse

Design system/Components

Date and time pickers

DateField opens the Solar Hijri calendar as a floating field, and TimeField opens two columns for hours and minutes. Both use the same floating panel and the same phone sheet.

In codecomponents/date-picker.tsxcomponents/time-picker.tsx

On this page

  1. Live example
  2. Behavior
  3. Rules
  4. Size and panel

Live example

Pick a date and set a time. The date value is always ISO (yyyy-mm-dd) and the time is HH:MM; it's the display that becomes Solar Hijri and localized.

Live example

Behavior

  • The calendar opens to the month of the selected date, or the current month.
  • The month arrow row is written for right-to-left, and in left-to-right the whole row is mirrored, not each icon individually.
  • The hour and minute columns scroll the current value into view when they open; otherwise a meeting at 18:00 would open at midnight and look empty.
  • Minutes move in steps; 5 minutes by default.

Rules

Do

Store the value as ISO and format it for display.

Don't

Storing a Solar Hijri string; comparing and sorting break.

Do

formatPublicDate on public pages.

Don't

formatJalali on a page with international readers.

<DateField label={tr("موعد")} value={due} onChange={setDue} />
<TimeField label={tr("ساعت")} value={time} onChange={setTime} minuteStep={15} />

Size and panel

Field58px · 16px / 500The same floating field
Time chip.select-chip-time · min-width 86px
PanelFloating · z-index 1280
Phone.sheet-menu · max-height 72vh

Do

minuteStep sized to the task: 5 for meetings, 15 for due times.

Don't

60 minute rows to scroll through.

Related pages

Numbers and datesThe Solar Hijri calendar and month and day names.PickerThe same Floating and the same sheet.Text fieldThe same floating label and rippling line.RTL and languagesMonth arrows get their direction from StepArrow.
PreviousPickerNextCheckbox

Related pages

  • PageBrand kitThe Flowra mark and logo, colors, typography, clear space and minimum size, and the brand kit files to download.
  • PageDocumentationThe complete Flowra guide: actions, calendar, meetings, knowledge, files, Folio, chat, network, finance, connectors, settings and AI, each with its connections.
  • PageChangelogWhat each release added to Flowra, what got better, and what’s coming next.
  • PageContact usReach the right team: support, sales and plans, partnerships, careers, or security and privacy.
Flowra

Flowra is an all-in-one workspace for managing tasks, projects, finances, meetings, and teamwork, powered by AI to keep everything organized in one place.

Solutions for teams

  • Marketing teams
  • Product and dev teams
  • Design and content teams
  • Operations teams
  • Sales and services teams
  • Remote teams

Roles and flows

  • Project managers
  • Freelancers and consultants
  • Meeting to action
  • Actions with financial context
  • Actions with contract context
  • Brief to project delivery

With Flowra

  • All solutions
  • Pricing
  • Frequently asked questions
  • Documentation
  • Contact us
  • Brand kit
  • Design system
Crafted by Karo Studio
SecurityPrivacyTermsCookies
Version 0.16.0