You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
32 lines
868 B
32 lines
868 B
<!--
|
|
Form field primitive: label + control + help/error in a tidy
|
|
column. Children control gets the `.nx-field-input` /
|
|
`.nx-field-textarea` / `.nx-field-select` class from the consumer.
|
|
-->
|
|
<script lang="ts">
|
|
import type { Snippet } from 'svelte';
|
|
import Icon from './Icon.svelte';
|
|
interface Props {
|
|
id: string;
|
|
label: string;
|
|
hint?: string;
|
|
error?: string;
|
|
children: Snippet;
|
|
}
|
|
let { id, label, hint, error, children }: Props = $props();
|
|
const errorId = $derived(error ? `${id}-error` : undefined);
|
|
</script>
|
|
|
|
<div class="nx-field" class:has-error={Boolean(error)}>
|
|
<label class="nx-field-label" for={id}>{label}</label>
|
|
{@render children()}
|
|
{#if error}
|
|
<p id={errorId} class="nx-field-error" role="alert">
|
|
<Icon name="alert" size={12} />
|
|
<span>{error}</span>
|
|
</p>
|
|
{:else if hint}
|
|
<p class="nx-field-help">{hint}</p>
|
|
{/if}
|
|
</div>
|