Form

Form Components are helpers to supplement input Components that are meant for form Components like TextInput.

HelpText

NOTE: Introduced feature in v0.2.7.

Form.HelpText is typically used for displaying information about how to input information into a form properly.

<script>
    import {Form, TextInput} from "@kahi-ui/framework";
</script>

<TextInput type="password" />
<Form.HelpText>
    passwords must be 8+ characters at minimum
</Form.HelpText>

Imports

<script>
    import {Form} from "@kahi-ui/framework";

    const {
        Control,
        Group,
        FieldSet,
        HelpText,
        Label,
        Legend,
    } = Form;
</script>

Label

NOTE: Introduced feature in v0.2.7.

IMPORTANT: This feature sets a Svelte Context that inner content can consume.

Form.Label focuses the target input Component whenever its child content is clicked.

<script>
    import {Check, Form} from "@kahi-ui/framework";
</script>

<Form.Label for="form-label-group">
    <Check />
    Click me!
</Form.Label>

Control

NOTE: Introduced feature in v0.2.7.

IMPORTANT: This feature sets a Svelte Context that inner content can consume.

Form.Control is typically used to display form and input Components in a preformatted stack.

<script>
    import {
        Code,
        Form,
        TextInput,
    } from "@kahi-ui/framework";

    let value = "sample@sample.org";
</script>

<Form.Control logic_id="form-control">
    <Form.Label>
        Register E-Mail for Newsletter
    </Form.Label>

    <TextInput bind:value />
    <Form.HelpText>
        Make sure to enter a valid E-Mail Address, e.g.
        <Code>sample@sample.org</Code>
    </Form.HelpText>
</Form.Control>

Group

NOTE: Introduced feature in v0.2.7.

NOTE: This feature is renderless, meaning it does not render anything extra to the DOM.

Form.Group lets you directly set the relevant form-related Svelte Contexts via its properties without using any preformatted shown above.

<script>
    import {
        Form,
        Radio,
        Stack,
        Text,
    } from "@kahi-ui/framework";

    let logic_state = "vanilla";
</script>

<Text is="strong">
    Select an Ice Cream Flavor
    <Text is="sup">{logic_state}</Text>
</Text>

<Stack.Container spacing="small" margin_top="small">
    <Form.Group
        logic_name="form-group"
        bind:logic_state
    >
        <Radio
            id="form-group-bubblegum"
            palette="accent"
            sizing="tiny"
            value="bubblegum"
        >
            Bubblegum
        </Radio>

        <Radio
            id="form-group-chocolate"
            palette="accent"
            sizing="tiny"
            value="chocolate"
        >
            Chocolate
        </Radio>

        <Radio
            id="form-group-vanilla"
            palette="accent"
            sizing="tiny"
            value="vanilla"
        >
            Vanilla
        </Radio>
    </Form.Group>
</Stack.Container>

Legend

NOTE: Introduced feature in v0.6.0.

IMPORTANT: When using outside of a Form.FieldSet, use <Form.Legend is="span"> for semantically correct HTML tags.

Form.Legend is typically used for categorization headings, rendering text as smaller bold text with letter spacing.

<script>
    import {Form} from "@kahi-ui/framework";
</script>

<Form.Legend>VEGETABLES</Form.Legend>

FieldSet

NOTE: Introduced feature in v0.6.0.

Form.FieldSet is typically used for grouping together related form Components into a visually distinct box.

<script>
    import {
        Form,
        Stack,
        TextInput,
    } from "@kahi-ui/framework";
</script>

<Form.FieldSet>
    <Form.Legend>Personal Details</Form.Legend>

    <Stack.Container spacing="medium">
        <Form.Control
            logic_id="form-fieldset-first-name"
            logic_name="form-fieldset-first-name"
        >
            <Form.Label>First Name</Form.Label>
            <TextInput value="John" />
        </Form.Control>

        <Form.Control
            logic_id="form-fieldset-first-name"
            logic_name="form-fieldset-first-name"
        >
            <Form.Label>Last Name</Form.Label>
            <TextInput value="Smith" />
        </Form.Control>
    </Stack.Container>
</Form.FieldSet>