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>