import { Meta, Canvas, Controls, Story, Source } from '@storybook/blocks';
import * as FormGroupStories from './FormGroup.stories';

<Meta title="Form/FormGroup" />

# FormGroup <small class="bootstrap-docs">[Bootstrap FormGroup](https://getbootstrap.com/docs/5.1/forms/floating-labels/)</small>

The `<FormGroup>` component is a fundamental building block for creating organized and accessible forms. It provides a flexible container to add floating labels over input fields.

<Canvas>
  <Story of={FormGroupStories.Basic} />
</Canvas>

<div id="form-group-controls">
  <Controls of={FormGroupStories.Basic} />
</div>

## Floating Labels

<Canvas withSource="none">
  <Story of={FormGroupStories.Floating} />
</Canvas>

<Source
  dark
  language="html"
  code={`
<script>
  import { Badge, Form, Input } from '@sveltestrap/sveltestrap';
</script>

<Form>
  <FormGroup floating label="Floating Label">
    <Input placeholder="Enter a value" />
  </FormGroup>

  <FormGroup floating label="Select labels always float">
    <Input type="select" placeholder="Enter a value">
      <option />
      <option value="alpha">Alpha</option>
      <option value="bravo">Bravo</option>
      <option value="charlie">Charlie</option>
    </Input>
  </FormGroup>

  <FormGroup floating>
    <Input placeholder="Enter a value" />
    <div slot="label">
      Floating Label Slot <Badge>3</Badge>
    </div>
  </FormGroup>
</Form>
`} />