import { ArgTypes, Canvas, Markdown, Meta } from '@storybook/addon-docs/blocks';
import { cdnJs } from '../../globals/internal/storybook-cdn';
import * as FormStories from './form.stories';

<Meta of={FormStories} component="cds-form" />

# Form

[Source code](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/form/)
&nbsp;|&nbsp;
[Usage guidelines](https://www.carbondesignsystem.com/components/form/usage)
&nbsp;|&nbsp;
[Accessibility](https://www.carbondesignsystem.com/components/form/accessibility)

## Table of Contents

- [Overview](#overview)
- [With AI label](#with-ai-label)
- [Accessibility Considerations](#accessibility-considerations)
  - [Accessible Name](#accessible-name)
- [Component API](#component-api)
- [Feedback](#feedback)

## Overview

The `Form` component is configurable to fit various use cases and layouts. It is
purposely simple out of the box, and users are responsible for configuring it to
suit their needs.

<Canvas of={FormStories.Default} />

## With AI label

<Canvas of={FormStories.WithAILabel} />

## Accessibility Considerations

### Accessible Name

To comply with accessibility requirements, make sure to supply the component
with an accessible name by providing either the `aria-label`, `aria-labelledby`
or `title` attribute. Read more on the accessible naming rule
[here](https://able.ibm.com/rules/archives/latest/doc/en-US/aria_accessiblename_exists.html).

## Component API

## `cds-form`

<ArgTypes of="cds-form" />

<Markdown>{`${cdnJs({ components: ['form'] })}`}</Markdown>

## Feedback

Help us improve this component by providing feedback, asking questions on Slack,
or updating this file on
[GitHub](https://github.com/carbon-design-system/carbon/edit/main/packages/web-components/src/components/form/form.mdx).
