Preview

Usage

<cs-form>
  <cs-header slot="header" variant="h1">Create distribution</cs-header>
  <cs-container>
    <cs-form-field label="Name">
      <cs-input placeholder="Enter name"></cs-input>
    </cs-form-field>
  </cs-container>
  <cs-space-between slot="actions" direction="horizontal" size="xs">
    <cs-button variant="link">Cancel</cs-button>
    <cs-button variant="primary">Submit</cs-button>
  </cs-space-between>
</cs-form>

Properties

analytics-metadataFormProps.AnalyticsMetadata

Specifies additional analytics-related metadata.

• instanceIdentifier - A unique string that identifies this component instance in your application.
• flowType - Identifies the type of flow represented by the component.
• resourceType - Identifies the type of resource represented by the flow. Note: This API is currently experimental.
• errorContext - Identifies the error category and sub-category.

error-icon-aria-labelstring default: ''

Provides a text alternative for the error icon in the error alert.

variant'full-page' | 'embedded' default: 'embedded'

Specify a form variant with one of the following:

• full-page - Use this variant when the form contains the entire content of the page.
• embedded - Use this variant when the form doesn't occupy the full page.

Slots

actions

Specifies actions for the form. You should wrap action buttons in a space between component with direction="horizontal" and size="xs".

default

Specifies the main form content.

errorText

Specifies a form-level validation message.

header

Specifies the form title and optional description. Use the header component.

secondaryActions

Specifies left-aligned secondary actions for the form. Use a button dropdown if multiple actions are required.