import { Meta, Story, Props, Preview } from '@storybook/addon-docs/blocks';

import InputWithLabel from 'js/patterns/molecules/forms/input-with-label'
import InputWithUnit from 'js/patterns/molecules/forms/input-with-unit'
import CheckboxWithLabel from 'js/patterns/molecules/forms/checkbox-with-label'
import RadiobuttonWithLabel from 'js/patterns/molecules/forms/radiobutton-with-label'

<Meta title='3.Molecules|Forms' />

# Form Elements

## Input with Label

<Preview withToolbar>
    <Story name='Input with Label'>
        <InputWithLabel id='id0' label="Hallo Label" />
    </Story>
</Preview>

## Checkbox with Label

<Preview withToolbar>
    <Story name='Checkbox with Label'>
        <CheckboxWithLabel id='id1' label="Hallo Label" />
    </Story>
</Preview>

## Radiobutton with Label

<Preview withToolbar>
    <Story name='Radiobutton with Label'>
        <RadiobuttonWithLabel id='id2' label="Hallo Label" />
    </Story>
</Preview>

## Form Unit

<Preview withToolbar>
    <Story name='Input with Unit'>
        <InputWithUnit unit='€' prefix={false} connected={false} />
    </Story>
</Preview>
