Skip to content

feat: form components #718

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
rohanchkrabrty wants to merge 1 commit into
base: main
Choose a base branch
from
Open

feat: form components #718

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 32 additions & 0 deletions apps/www/src/components/playground/field-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
'use client';

import { Field, Flex, InputField, TextArea } from '@raystack/apsara';
import PlaygroundLayout from './playground-layout';

export function FieldExamples() {
return (
<PlaygroundLayout title='Field'>
<Flex gap='large' wrap='wrap'>
<Flex gap='large' direction='column' style={{ width: 300 }}>
<Field label='Name' required helperText='Enter your full name'>
<InputField placeholder='John Doe' />
</Field>
<Field label='Email' error='Please enter a valid email'>
<InputField type='email' placeholder='Enter email' />
</Field>
<Field label='Phone' optional>
<InputField placeholder='Enter phone' />
</Field>
</Flex>
<Flex gap='large' direction='column' style={{ width: 300 }}>
<Field label='Bio' optional helperText='Tell us about yourself'>
<TextArea placeholder='Write something...' />
</Field>
<Field label='Disabled' disabled>
<InputField placeholder='Cannot edit' />
</Field>
</Flex>
</Flex>
</PlaygroundLayout>
);
}
26 changes: 26 additions & 0 deletions apps/www/src/components/playground/fieldset-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
'use client';

import { Field, Fieldset, Flex, InputField } from '@raystack/apsara';
import PlaygroundLayout from './playground-layout';

export function FieldsetExamples() {
return (
<PlaygroundLayout title='Fieldset'>
<Flex gap='large' direction='column' style={{ maxWidth: 400 }}>
<Fieldset legend='Contact Details'>
<Field label='Phone' required>
<InputField type='tel' placeholder='+1 (555) 000-0000' />
</Field>
<Field label='Address' optional>
<InputField placeholder='123 Main St' />
</Field>
</Fieldset>
<Fieldset legend='Disabled Section' disabled>
<Field label='Read Only'>
<InputField placeholder='Cannot edit' />
</Field>
</Fieldset>
</Flex>
</PlaygroundLayout>
);
}
41 changes: 41 additions & 0 deletions apps/www/src/components/playground/form-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
'use client';

import {
Button,
Field,
Fieldset,
Form,
InputField,
TextArea
} from '@raystack/apsara';
import PlaygroundLayout from './playground-layout';

export function FormExamples() {
return (
<PlaygroundLayout title='Form'>
<Form
onSubmit={e => {
e.preventDefault();
alert('Form submitted!');
}}
style={{ maxWidth: 400 }}
>
<Fieldset legend='Personal Information'>
<Field label='First Name' required>
<InputField placeholder='John' />
</Field>
<Field label='Last Name' required>
<InputField placeholder='Doe' />
</Field>
</Fieldset>
<Field label='Email' required helperText="We'll send a confirmation">
<InputField type='email' placeholder='john@example.com' />
</Field>
<Field label='Message' optional>
<TextArea placeholder='Tell us more...' />
</Field>
<Button type='submit'>Submit</Button>
</Form>
</PlaygroundLayout>
);
}
3 changes: 3 additions & 0 deletions apps/www/src/components/playground/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,11 @@ export * from './data-table-examples';
export * from './dialog-examples';
export * from './drawer-examples';
export * from './empty-state-examples';
export * from './field-examples';
export * from './fieldset-examples';
export * from './filter-chip-examples';
export * from './flex-examples';
export * from './form-examples';
export * from './headline-examples';
export * from './icon-button-examples';
export * from './image-examples';
Expand Down
32 changes: 12 additions & 20 deletions apps/www/src/components/playground/input-field-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
'use client';

import { Flex, InputField } from '@raystack/apsara';
import { Field, Flex, InputField } from '@raystack/apsara';
import { Home, Info } from 'lucide-react';
import PlaygroundLayout from './playground-layout';

Expand All @@ -9,32 +9,24 @@ export function InputFieldExamples() {
<PlaygroundLayout title='InputField'>
<Flex gap='large' wrap='wrap'>
<Flex gap='large' direction='column' style={{ width: 300 }}>
<InputField label='Default' placeholder='Enter text' />
<InputField
label='With label'
placeholder='Enter text'
helperText='This is a helper text'
/>
<InputField
label='With Error'
placeholder='Enter text'
error='This field is required'
/>
<Field label='Default'>
<InputField placeholder='Enter text' />
</Field>
<Field label='With Helper Text' helperText='This is a helper text'>
<InputField placeholder='Enter text' />
</Field>
<Field label='With Error' error='This field is required'>
<InputField placeholder='Enter text' />
</Field>
</Flex>
<Flex gap='large' direction='column' style={{ width: 300 }}>
<InputField placeholder='0.00' prefix='$' suffix='USD' />
<InputField
label='With Prefix/Suffix'
placeholder='0.00'
prefix='$'
suffix='USD'
/>
<InputField
label='With Icons'
placeholder='Enter text'
leadingIcon={<Home size={16} />}
trailingIcon={<Info size={16} />}
/>
<InputField label='Disabled' placeholder='Enter text' disabled />
<InputField placeholder='Enter text' disabled />
</Flex>
</Flex>
</PlaygroundLayout>
Expand Down
21 changes: 8 additions & 13 deletions apps/www/src/components/playground/text-area-examples.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,19 @@
'use client';

import { Flex, TextArea } from '@raystack/apsara';
import { Field, Flex, TextArea } from '@raystack/apsara';
import PlaygroundLayout from './playground-layout';

export function TextAreaExamples() {
return (
<PlaygroundLayout title='TextArea'>
<Flex gap='large' wrap='wrap'>
<TextArea label='Basic TextArea' placeholder='Enter your text here' />
<TextArea
label='Basic TextArea'
placeholder='Enter your text here'
helperText='This is a helper text'
/>
<TextArea
label='Error TextArea'
error={true}
helperText='This field has an error'
placeholder='Enter your text here'
/>
<Field label='Basic TextArea' helperText='This is a helper text'>
<TextArea placeholder='Enter your text here' />
</Field>
<Field label='Error TextArea' error='This field has an error'>
<TextArea placeholder='Enter your text here' />
</Field>
<TextArea placeholder='Without Field wrapper' width='300px' />
Copy link
Contributor

@coderabbitai coderabbitai bot Mar 23, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue | 🟡 Minor

Standalone TextArea example is missing an accessible name.

Line 16 renders a control without Field label or aria-label. Placeholder text is not a reliable accessible label.

✅ Suggested fix 
-        <TextArea placeholder='Without Field wrapper' width='300px' />
+        <TextArea
+          placeholder='Without Field wrapper'
+          aria-label='Without Field wrapper'
+          width='300px'
+        />
📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change
<TextArea placeholder='Without Field wrapper' width='300px' />
<TextArea
placeholder='Without Field wrapper'
aria-label='Without Field wrapper'
width='300px'
/>
🤖 Prompt for AI Agents 
Verify each finding against the current code and only fix it if needed.

In `@apps/www/src/components/playground/text-area-examples.tsx` at line 16, The
standalone TextArea example renders a control without an accessible name; update
the example that uses the TextArea component so it has an explicit accessible
label by either wrapping it in your Field/Label components (e.g., add a Field
with a Label and put TextArea inside) or by adding an aria-label (or
aria-labelledby) prop directly to TextArea; ensure the label text is descriptive
and not just placeholder content so screen readers can announce the control.

</Flex>
</PlaygroundLayout>
);
Expand Down
103 changes: 103 additions & 0 deletions apps/www/src/content/docs/components/field/demo.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,103 @@
'use client';

import { getPropsString } from '@/lib/utils';

export const getCode = (props: any) => {
const { label, helperText, error, required, optional, ...rest } = props;
const fieldProps: Record<string, unknown> = {};
if (label) fieldProps.label = label;
if (helperText) fieldProps.helperText = helperText;
if (error) fieldProps.error = error;
if (required) fieldProps.required = required;
if (optional) fieldProps.optional = optional;
return `<Field${getPropsString(fieldProps)}>
<InputField${getPropsString(rest)} placeholder="Enter text" />
</Field>`;
};

export const playground = {
type: 'playground',
controls: {
label: { type: 'text', initialValue: 'Email' },
helperText: { type: 'text', initialValue: "We won't share your email" },
error: { type: 'text', initialValue: '' },
required: { type: 'checkbox', initialValue: false, defaultValue: false },
optional: { type: 'checkbox', initialValue: false, defaultValue: false },
disabled: { type: 'checkbox', initialValue: false, defaultValue: false }
},
getCode
};

export const simpleDemo = {
type: 'code',
code: `<Field label="Name" helperText="Enter your full name">
<InputField placeholder="John Doe" />
</Field>`
};

export const errorDemo = {
type: 'code',
code: `<Field label="Email" error="Please enter a valid email address">
<InputField placeholder="Enter email" />
</Field>`
};

export const helperTextDemo = {
type: 'code',
code: `<Field label="Password" helperText="Must be at least 8 characters">
<InputField type="password" placeholder="Enter password" />
</Field>`
};

export const requiredDemo = {
type: 'code',
code: `<Field label="Username" required>
<InputField placeholder="Enter username" />
</Field>`
};

export const optionalDemo = {
type: 'code',
code: `<Field label="Phone Number" optional helperText="We may use this for verification">
<InputField placeholder="Enter phone number" />
</Field>`
};

export const subComponentDemo = {
type: 'code',
code: `<Field name="email">
<Field.Label>Email</Field.Label>
<Field.Control required type="email" placeholder="Enter email" />
<Field.Error match="valueMissing">Email is required</Field.Error>
<Field.Error match="typeMismatch">Please enter a valid email</Field.Error>
<Field.Description>We'll send a verification link</Field.Description>
</Field>`
};

export const withInputFieldDemo = {
type: 'code',
code: `<Field label="Full Name" required helperText="As it appears on your ID">
<InputField placeholder="John Doe" />
</Field>`
};

export const withTextAreaDemo = {
type: 'code',
code: `<Field label="Bio" optional helperText="Tell us about yourself">
<TextArea placeholder="Write something..." />
</Field>`
};

export const withSelectDemo = {
type: 'code',
code: `<Field label="Country" required>
<Select>
<Select.Trigger />
<Select.Content>
<Select.Item value="us">United States</Select.Item>
<Select.Item value="uk">United Kingdom</Select.Item>
<Select.Item value="ca">Canada</Select.Item>
</Select.Content>
</Select>
</Field>`
};
Loading
Loading