DS nav
Buttons
Text Inputs
Component based input elements
We'll never share your email.
Must be at least 3 characters.
<TextInput
id="code"
label="Invite code"
required
placeholder="XXXX-XXXX"
/>Contact support to change your plan.
Min. 8 characters, at least one number and one symbol.
Passwords do not match.
Include country code for international numbers.
Please enter a valid URL including https://
Contact support to change your plan.
Copy this key — it won't be shown again.
You must be at least 18 to register.
Enter a valid UK postcode.
That doesn't look like a valid UK postcode.
Color Inputs
browser support for datalist on type="color" is Chrome/Edge only — Firefox and Safari ignore it silently. The field works fine everywhere, the swatches just don't appear.
<ColorInput
id="theme-color"
label="Theme Color"
value="#ef4444"
presets={[
{ value: "#2563eb", label: "Blue" },
{ value: "#10b981", label: "Green" },
{ value: "#ef4444", label: "Red" },
{ value: "#f59e0b", label: "Orange" },
{ value: "#8b5cf6", label: "Purple" },
]}
/>Used for buttons and links.
Used for buttons and links.
Checkbox Groups
<OptionGroup
label="Select your interests"
name="interests"
options={[
{ value: "web", label: "Web Development", checked: true },
{ value: "mobile", label: "Mobile Development" },
{ value: "design", label: "UI/UX Design", checked: true },
{ value: "devops", label: "DevOps (Coming Soon)", disabled: true },
]}
helpText="Choose all that apply to your skills."
/>Two Column Radio Button Groups
<OptionGroup
type="radio"
label="Choose your plan"
name="plan"
options={[
{ value: "free", label: "Free Plan" },
{ value: "pro", label: "Pro Plan", checked: true },
{ value: "enterprise", label: "Enterprise Plan" },
{ value: "custom", label: "Custom Plan", disabled: true },
]}
helpText="Select the plan that best fits your needs."
/>Range Sliders
Set your monthly budget for this project.
Please select a valid budget range.
How many people will be using this service?
Team size is required.
Size Variations
Small size controls for compact layouts.
Error message here.
Large size control for better visibility.
Volume level required.
Large sizes
Large size control for better visibility.
Volume level required.
Error States
Choose how you'd like to pay.
Please select a payment method.
You must be 18 or older to continue.
You must be at least 18 years old.
Textarea Controls
<Textarea
id="description"
label="Project description"
placeholder="Describe your project…"
rows={5}
helpText="Provide as much detail as you can."
/>Provide as much detail as you can.
Must be at least 50 characters.
Contact support to edit this field.
Select Controls
<SelectInput
id="country"
label="Country"
placeholder="Choose your country"
options={[
{ value: "us", label: "United States" },
{ value: "ca", label: "Canada" },
{ value: "uk", label: "United Kingdom" },
{ value: "de", label: "Germany" },
]}
helpText="Select your primary location."
<!-- error="Please select at least one location." -->
/>Select your primary location.
How urgent is this request?
Contact sales to change your tier.
Please select your country.
NewSelectInput - Select Controls
<NewSelectInput
id="country"
label="Country"
placeholder="Choose your country"
options={[
{ value: "us", label: "United States" },
{ value: "ca", label: "Canada" },
{ value: "uk", label: "United Kingdom" },
{ value: "de", label: "Germany" },
]}
helpText="Select your primary location."
<!-- error="Please select at least one location." -->
/>Select your primary location.
How urgent is this request?
Contact sales to change your tier.
Please select your country.
ComboInput Controls
<ComboInput
id="city"
label="City"
placeholder="Select or type a city…"
options={[
{ value: "New York" },
{ value: "Los Angeles" },
{ value: "Chicago" },
{ value: "Houston" },
]}
helpText="Start typing to filter suggestions."
/>Start typing to filter suggestions.
Please choose a city from the list.
File Upload Controls
Upload relevant documents for your project.
At least one file is required.
Optional: Add a profile picture to personalize your account.
Invalid file type selected.
Switch Controls
<Switch
id="notifications"
label="Email Notifications"
checked
helpText="Receive updates about your projects via email."
/>Receive updates about your projects via email.
Get notified about new features and promotions.
STYLING IS OFF.. should investigate or throw out.
You must accept the terms to continue.
Size Variations
Tell us about your experience.
Feedback must be at least 20 characters long.
Choose your primary department.
Department selection is required.
