Label, control, description and error as one unit, so every form lines up the same way.
npx shadcn@latest add @sphere-kit/fieldimport { Field, FieldCount, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle,} from "@/components/ui/field"3 rules for using it well. Open one to see it drawn.
Exports Field FieldCount FieldLabel FieldDescription FieldError FieldGroup FieldLegend FieldSeparator FieldSet FieldContent FieldTitle. Every part takes its element's usual props and a className.
| Prop | Options | Default |
|---|---|---|
| orientation | verticalhorizontalresponsive | vertical |
Letters, numbers and dashes. It goes after sphere.link/.
We send the weekly report here.
Shown to everyone you invite.
Set when the workspace was created.
Add https:// to the start of the address.
Only the workspace owner can change this.
Up to 500 characters.
What should change, and how will you know?
Shown in the changelog and sent to subscribers.
Write at least 10 characters so the team can act on it.
Editable again when the experiment ends.
Used for tax on your invoices.
Weekly reports arrive at 9am in this timezone.
Pick a funnel to compare against.
Only the workspace owner can change this.
Signups, trials and paid conversions, every Monday at 9am.
Each variant gets the same share of new visitors.
Visitors see the original page until you turn it back on.
Email trial users three days before the trial ends.
Who can see this funnel.
Verify go.example.com before turning this on.
Available on the Scale plan.
In the experiment: 75%
Larger previews take longer to load.
Range: 0.3 - 0.7
$25 - $75
A: 10%, B: 20%, C: 70%
Keep the discount at 25% or less.
Add seats from the billing page.
Used for tax on your invoices.
Weekly reports arrive at 9am in this timezone.
Grouped by region.
Pick a funnel to compare against.
Only the workspace owner can change this.
Enter the 6-digit code we sent to maya@example.com.
Enter the code from your authenticator app.
4 digits, numbers only.
That code has expired. Request a new one and try again.
You can request a new code in 30 seconds.
Shown on comments and shared reports.
A line or two for your teammates.
Comments, invites and finished experiments.
Opens first on the dashboard.
Used for tax on your invoices.
Alert me when conversion drops by this much.
One line scrolls inside the field. Hover for the whole address.
Text wraps, long addresses break anywhere, and past a few lines it scrolls.