Form fields

import { EmailField, Form, PasswordField, TextField } from '@systhemaui/next'

export default function Demo() {
  return (
    <Form style={{ width: '100%', maxWidth: 480 }}>
      <TextField name="fields-name" label="Full name" autoComplete="name" required />
      <EmailField name="fields-email" label="Email" description="We never share it." required />
      <PasswordField
        name="fields-password"
        label="Password"
        description="At least 12 characters."
        descriptionPosition="bottom"
        autoComplete="new-password"
        minLength={12}
        required
      />
    </Form>
  )
}

import { FormRow, TextField } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormRow style={{ width: '100%', maxWidth: 640 }}>
      <TextField name="position-top" label="Username" description="Shown on your profile." />
      <TextField
        name="position-bottom"
        label="Display name"
        description="Shown on your profile."
        descriptionPosition="bottom"
      />
    </FormRow>
  )
}

import { EmailField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <EmailField
        name="error-native"
        label="Email"
        required
        invalidMessage="Enter an email address like jane@example.com."
      />
    </div>
  )
}

import { TextField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <TextField
        name="error-server"
        label="Voucher code"
        defaultValue="SUMMER2019"
        className="is-invalid"
        invalidMessage="This code expired on 31 August 2019."
      />
    </div>
  )
}

import { EmailField, FormRow, PhoneField, TextField } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormRow style={{ width: '100%', maxWidth: 640 }}>
      <TextField name="widths-first" label="First name" width="50%" />
      <TextField name="widths-last" label="Last name" width="50%" />
      <EmailField name="widths-email" label="Email" width="67%" />
      <PhoneField name="widths-phone" label="Phone" width="33%" />
    </FormRow>
  )
}

import { TextField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <TextField
        name="field-website"
        type="url"
        label="Website"
        placeholder="https://"
        description="Include https://."
        invalidMessage="Enter a full URL."
      />
    </div>
  )
}

import { EmailField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <EmailField
        name="field-email"
        label="Work email"
        defaultValue="jane@example"
        className="is-invalid"
        invalidMessage="Add the domain ending, for example .com."
      />
    </div>
  )
}

import { PhoneField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <PhoneField
        name="field-phone"
        label="Phone"
        placeholder="+32 470 12 34 56"
        description="Only used for delivery updates."
      />
    </div>
  )
}

import { PasswordField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <PasswordField
        name="field-password"
        label="New password"
        autoComplete="new-password"
        minLength={12}
        required
        description="At least 12 characters."
        descriptionPosition="bottom"
        invalidMessage="Use at least 12 characters."
      />
    </div>
  )
}

import { NumberField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <NumberField
        name="field-guests"
        label="Guests"
        min={1}
        max={12}
        defaultValue={2}
        description="Up to 12 per booking."
        invalidMessage="Choose between 1 and 12 guests."
      />
    </div>
  )
}

import { DateField, FormRow } from '@systhemaui/next'

export default function Demo() {
  return (
    <FormRow style={{ width: '100%', maxWidth: 640 }}>
      <DateField name="field-arrival" label="Arrival" min="2026-01-01" />
      <DateField name="field-meeting" label="Call" inputType="datetime-local" />
    </FormRow>
  )
}

import { TextareaField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <TextareaField
        name="field-message"
        label="Message"
        description="Tell us about your project."
        maxLength={2000}
        resize
        style={{ height: 160 }}
      />
    </div>
  )
}

import { Option, SelectField, SelectPlaceholder } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <SelectField
        name="field-topic"
        label="Topic"
        required
        description="Routes your message to the right team."
        invalidMessage="Choose a topic."
      >
        <SelectPlaceholder>Choose a topic</SelectPlaceholder>
        <Option value="sales">Sales</Option>
        <Option value="support">Support</Option>
        <Option value="press">Press</Option>
      </SelectField>
    </div>
  )
}

import { FileField } from '@systhemaui/next'

export default function Demo() {
  return (
    <div style={{ width: '100%', maxWidth: 480 }}>
      <FileField
        name="field-attachments"
        label="Attachments"
        accept="image/*,.pdf"
        multiple
        description="Images or PDF, up to 10 MB each."
      />
    </div>
  )
}

import { RadioField } from '@systhemaui/next'

export default function Demo() {
  return (
    <RadioField
      name="field-delivery"
      label="Delivery"
      description="Pick-up is free."
      required
      items={[
        {
          id: 'delivery-standard',
          value: 'standard',
          label: 'Standard (3 to 5 days)',
          defaultChecked: true,
        },
        { id: 'delivery-express', value: 'express', label: 'Express (next day)' },
        { id: 'delivery-pickup', value: 'pickup', label: 'Pick up in store' },
      ]}
    />
  )
}

'use client'

import { useState } from 'react'
import { CheckboxField } from '@systhemaui/next'

const topics = [
  { value: 'design', label: 'Design' },
  { value: 'development', label: 'Development' },
  { value: 'content', label: 'Content' },
]

export default function Demo() {
  const [selected, setSelected] = useState<string[]>(['design'])

  return (
    <CheckboxField
      name="field-topics"
      label="Topics"
      description="Choose at least one."
      required
      requiredMode="any"
      invalidMessage="Choose at least one topic."
      items={topics.map((topic) => ({
        ...topic,
        id: `topics-${topic.value}`,
        checked: selected.includes(topic.value),
        onChange: () =>
          setSelected((current) =>
            current.includes(topic.value)
              ? current.filter((value) => value !== topic.value)
              : [...current, topic.value],
          ),
      }))}
    />
  )
}