Fieldset#

import { component, render } from 'sigx';
import { Fieldset, Label, Input } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Fieldset>
            <Fieldset.Legend>Page title</Fieldset.Legend>
            <Input placeholder="My awesome page" />
            <Label>You can edit page title later on from settings</Label>
        </Fieldset>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Fieldset, Label, Input } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Fieldset class="bg-base-200 border-base-300 rounded-box w-xs border p-4">
            <Fieldset.Legend>Page title</Fieldset.Legend>
            <Input placeholder="My awesome page" />
            <Label>You can edit page title later on from settings</Label>
        </Fieldset>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Fieldset, Label, Input } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Fieldset class="bg-base-200 border-base-300 rounded-box w-xs border p-4">
            <Fieldset.Legend>Page details</Fieldset.Legend>
            <Label>Title</Label>
            <Input placeholder="My awesome page" />
            <Label>Slug</Label>
            <Input placeholder="my-awesome-page" />
            <Label>Author</Label>
            <Input placeholder="Name" />
        </Fieldset>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Fieldset, Label, Input, Button, Join } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Fieldset class="bg-base-200 border-base-300 rounded-box w-xs border p-4">
            <Fieldset.Legend>Settings</Fieldset.Legend>
            <Join>
                <Input placeholder="Product name" class="join-item" />
                <Button class="join-item">Save</Button>
            </Join>
        </Fieldset>
    );
});

render(<Demo />, "#sandbox");

import { component, render } from 'sigx';
import { Fieldset, Label, Input, Button } from '@sigx/daisyui';

const Demo = component(() => {
    return () => (
        <Fieldset class="bg-base-200 border-base-300 rounded-box w-xs border p-4">
            <Fieldset.Legend>Login</Fieldset.Legend>
            <Label>Email</Label>
            <Input type="email" placeholder="Email" />
            <Label>Password</Label>
            <Input type="password" placeholder="Password" />
            <Button variant="neutral" class="mt-4">Login</Button>
        </Fieldset>
    );
});

render(<Demo />, "#sandbox");