Field

Field wires a label, control, and helper/error text together with correct aria (the control’s aria-describedby and invalid state are handled by Ark). FieldSet groups related fields in a <fieldset> with a legend. Built on Ark UI field and fieldset, sourced from Shark UI.

UsernamePick something memorable.Username is already taken.

Username Pick something memorable. Username is already taken.

// apps/docs/src/components/examples/field/default/react.tsx
import { Field, FieldLabel, FieldRequiredIndicator, FieldHelper, FieldError, Input } from '@cloudvoyant/helical-react';

export default function ReactFieldDefault() {
  return (
    <Field invalid className="max-w-sm">
      <FieldLabel>
        Username
        <FieldRequiredIndicator />
      </FieldLabel>
      <Input defaultValue="jane" />
      <FieldHelper>Pick something memorable.</FieldHelper>
      <FieldError>Username is already taken.</FieldError>
    </Field>
  );
}

<!-- apps/docs/src/components/examples/field/default/svelte.svelte -->
<script lang="ts">
  import { Field, FieldLabel, FieldRequiredIndicator, FieldHelper, FieldError, Input } from '@cloudvoyant/helical-svelte';
</script>

<Field invalid class="max-w-sm">
  <FieldLabel>
    Username
    <FieldRequiredIndicator />
  </FieldLabel>
  <Input defaultValue="jane" />
  <FieldHelper>Pick something memorable.</FieldHelper>
  <FieldError>Username is already taken.</FieldError>
</Field>

Examples

Fieldset

Billing address

Street

City

Billing address

Street

City

// apps/docs/src/components/examples/field/fieldset/react.tsx
import { FieldSet, FieldSetLegend, Field, FieldLabel, Input } from '@cloudvoyant/helical-react';

export default function ReactFieldFieldset() {
  return (
    <FieldSet className="max-w-sm">
      <FieldSetLegend>Billing address</FieldSetLegend>
      <Field>
        <FieldLabel>Street</FieldLabel>
        <Input placeholder="123 Main St" />
      </Field>
      <Field>
        <FieldLabel>City</FieldLabel>
        <Input placeholder="Springfield" />
      </Field>
    </FieldSet>
  );
}

<!-- apps/docs/src/components/examples/field/fieldset/svelte.svelte -->
<script lang="ts">
  import { FieldSet, FieldSetLegend, Field, FieldLabel, Input } from '@cloudvoyant/helical-svelte';
</script>

<FieldSet class="max-w-sm">
  <FieldSetLegend>Billing address</FieldSetLegend>
  <Field>
    <FieldLabel>Street</FieldLabel>
    <Input placeholder="123 Main St" />
  </Field>
  <Field>
    <FieldLabel>City</FieldLabel>
    <Input placeholder="Springfield" />
  </Field>
</FieldSet>

API Reference

Field

Props

Accepts all Ark FieldRoot props (invalid, disabled, required, ids, …) plus className/class.

FieldLabel

Props

Accepts all Ark FieldLabel props plus className/class.

FieldHelper

Props

Accepts all Ark FieldHelperText props plus className/class.

FieldError

Props

Accepts all Ark FieldErrorText props plus className/class.

FieldRequiredIndicator

Props

Accepts all Ark FieldRequiredIndicator props plus className/class. Defaults to rendering *.

FieldSet

Props

Accepts all Ark FieldsetRoot props plus className/class.

FieldSetLegend / FieldSetHelper / FieldSetError

Accept all corresponding Ark Fieldset* props plus className/class.

Accessibility

Ark wires for/id, aria-describedby, and aria-invalid between the label, control, helper, and error text. FieldSet renders a native <fieldset>/<legend>.

Theming

No theme extension — uses --foreground, --muted-foreground, --destructive.