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/Patterns

Form layout and validation

A form in Flowra is a single column, with floating fields and 14px spacing; short labels, hints under the field, errors only on the field they're about, and a submit button that stays enabled until the person presses it.

In codecomponents/text-field.tsxapp/login/page.tsxcomponents/knowledge/ui.tsx (Dialog)

On this page

  1. Live example
  2. Layout
  3. When to validate
  4. Rules

Live example

Press “Submit” to see validation; after the first submit, each field corrects itself as you type.

Live example

The invitation goes to this address.

Layout

Field spacing14pxgap-3.5 in the Dialog body
Field58px · compact 44pxTouch: font 16px
Help11.5px · var(--text-secondary) · margin-top 5pxAA: 5.14 to 1 on a light card
Columns1Two columns only for a short pair like date and time
ButtonsDialog footer · flex-1 · ghost, then dark
  • Field order follows the order people think in: first what, then for whom, then when.
  • Few optional fields, and last; the shorter the form, the more finished it feels.
  • The required mark is the requiredMark asterisk; if every field is required, none gets an asterisk.
  • Independent options come as boxed Checkboxes under the fields.

When to validate

  • No error is shown before the first “Submit”; someone who's still typing hasn't made a mistake.
  • After the first submit, each field is revalidated as it's typed in, so the error disappears the moment it's fixed.
  • The submit button stays enabled with a wrong value, and pressing it names the problem field; only an empty required field disables the button.
  • A server error goes back to its own field if it's about one field; otherwise it's one sentence above the buttons.
  • A wrong password is about the username and password pair, so both get marked.

Rules

Do

“This email address isn't complete.” under that field.

Don't

“The form is invalid.” at the top of the form.

Do

Keep what the person entered and just say what's missing.

Don't

Clearing the wrong field.

Do

For a suggestion, a fix button: “Use mehran”.

Don't

Auto-correcting someone's username or password without asking.

Related pages

Text fieldThe core material of a form.CheckboxIndependent options in a form.Creation flowA creation form in a dialog.Copy rules for each surfaceError and hint copy.
PreviousList, filter, and searchNextCreation flow

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