nylas-form-card

The nylas-form-card element is a card that can be used to display a form. It’s a simple wrapper around a card with a header and content area.

import { NylasFormCard } from '@nylas/react';

export default function NylasFormCardExample() {
  return (
    <div className="inline-block border border-dashed border-gray-300 min-w-[400px] rounded-md p-4 justify-center">
      <NylasFormCard
        title="Booking Information"
        description="Please provide your details"
      >
        <div className="p-4">
          <p>Form content goes here</p>
        </div>
      </NylasFormCard>
    </div>
  );
}

Properties

`themeConfig?`


Name	`themeConfig`
Description	The theme configuration.
Type	`undefined \| { '--nylas-primary'?: string \| undefined; '--nylas-info'?: string \| undefined;` `'--nylas-success'?: string \| undefined; '--nylas-warning'?: string \| undefined;` `'--nylas-error'?: string \| undefined; '--nylas-error-pressed'?: string \| undefined;` `'--nylas-base-0'?: string \| undefined; '--nylas-base-25'?: string \| undefined;` `'--nylas-base-50'?: string \| undefined; '--nylas-base-100'?: string \| undefined;` `'--nylas-base-200'?: string \| undefined; '--nylas-base-300'?: string \| undefined;` `'--nylas-base-400'?: string \| undefined; '--nylas-base-500'?: string \| undefined;` `'--nylas-base-600'?: string \| undefined; '--nylas-base-700'?: string \| undefined;` `'--nylas-base-800'?: string \| undefined; '--nylas-base-900'?: string \| undefined;` `'--nylas-base-950'?: string \| undefined; '--nylas-color-blue-50'?: string \| undefined;` `'--nylas-color-blue-100'?: string \| undefined; '--nylas-color-blue-300'?: string \| undefined;` `'--nylas-color-blue-500'?: string \| undefined; '--nylas-color-blue-700'?: string \| undefined;` `'--nylas-color-blue-900'?: string \| undefined; '--nylas-color-red-50'?: string \| undefined;` `'--nylas-color-red-100'?: string \| undefined; '--nylas-color-red-300'?: string \| undefined;` `'--nylas-color-red-500'?: string \| undefined; '--nylas-color-red-700'?: string \| undefined;` `'--nylas-color-red-900'?: string \| undefined; '--nylas-color-green-50'?: string \| undefined;` `'--nylas-color-green-100'?: string \| undefined; '--nylas-color-green-300'?: string \|` `undefined;'--nylas-color-green-500'?: string \| undefined; '--nylas-color-green-700'?: string \|` `undefined; '--nylas-color-green-900'?: string \| undefined; '--nylas-color-yellow-50'?: string` `\| undefined; '--nylas-color-yellow-100'?: string \| undefined; '--nylas-color-yellow-300'?:` `string \| undefined; '--nylas-color-yellow-500'?: string \| undefined;` `'--nylas-color-yellow-700'?: string \| undefined; '--nylas-color-yellow-900'?: string` `\| undefined; '--nylas-color-purple-50'?: string \| undefined; '--nylas-color-purple-100'?:` `string \| undefined; '--nylas-color-purple-300'?: string \| undefined;` `'--nylas-color-purple-500'?: string \| undefined; '--nylas-color-purple-700'?: string \|` `undefined; '--nylas-color-purple-900'?: string \| undefined; '--nylas-color-sky-50'?: string \|` `undefined; '--nylas-color-sky-100'?: string \| undefined; '--nylas-color-sky-300'?: string \|` `undefined; '--nylas-color-sky-500'?: string \| undefined; '--nylas-color-sky-700'?: string \|` `undefined; '--nylas-color-sky-900'?: string \| undefined; '--nylas-color-black'?: string \|` `undefined; '--nylas-color-grey-900'?: string \| undefined; '--nylas-color-grey-800'?: string \|` `undefined; '--nylas-color-grey-700'?: string \| undefined; '--nylas-color-grey-600'?: string \|` `undefined; '--nylas-color-grey-500'?: string \| undefined; '--nylas-color-grey-400'?: string \|` `undefined; '--nylas-color-grey-300'?: string \| undefined; '--nylas-color-grey-200'?: string \|` `undefined; '--nylas-color-grey-100'?: string \| undefined; '--nylas-color-grey-50'?: string \|` `undefined; '--nylas-color-white'?: string \| undefined; '--nylas-font-family'?: string \|` `undefined; '--nylas-font-size'?: string \| undefined; '--nylas-border-radius'?: string \|` `undefined; '--nylas-border-radius-2x'?: string \| undefined; '--nylas-border-radius-3x'?:` `string \| undefined; }`

CSS parts

Part	Description
`nfc`
`nfc__header`

Code samples

The nylas-form-card element is automatically included in the main NylasSchedulerEditor component. The following code samples show how to use the element on its own.

<nylas-form-card>
  <div slot="header">
    <h3>Contact Information</h3>
  </div>
  <div slot="content">
    <form>
      <label for="name">Name:</label>
      <input type="text" id="name" name="name" />

      <label for="email">Email:</label>
      <input type="email" id="email" name="email" />

      <button type="submit">Submit</button>
    </form>
  </div>
</nylas-form-card>

<nylas-form-card>
  <div slot="header">
    <h3>Event Details</h3>
    <p>Please fill out the event information below</p>
  </div>
  <div slot="content">
    <div class="form-group">
      <label for="event-title">Event Title</label>
      <input type="text" id="event-title" name="event-title" required />
    </div>

    <div class="form-group">
      <label for="event-description">Description</label>
      <textarea id="event-description" name="event-description" rows="4"></textarea>
    </div>

    <div class="form-group">
      <label for="event-date">Event Date</label>
      <input type="date" id="event-date" name="event-date" required />
    </div>

    <div class="form-actions">
      <button type="button" class="btn-secondary">Cancel</button>
      <button type="submit" class="btn-primary">Save Event</button>
    </div>
  </div>
</nylas-form-card>

<nylas-form-card
  theme-config='{
    "--nylas-primary": "#007bff",
    "--nylas-base-100": "#ffffff",
    "--nylas-border-radius": "8px"
  }'>
  <div slot="header">
    <h3>Custom Styled Form</h3>
  </div>
  <div slot="content">
    <!-- Your form content goes here -->
  </div>
</nylas-form-card>