Field

example

code

import { Field, TextInput } from 'charcell/react';

export function FieldExample() {
  return (
    <Field label="name" htmlFor="name" description="read out by the announcer">
      {({ control }) => (
        <TextInput {...control} placeholder="doreen schmorley" />
      )}
    </Field>
  );
}

<script setup lang="ts">
import { Field, TextInput } from 'charcell/vue';
</script>

<template>
  <Field label="name" htmlFor="name" description="read out by the announcer">
    <template #default="{ control }">
      <TextInput v-bind="control" placeholder="doreen schmorley" />
    </template>
  </Field>
</template>

<script lang="ts">
  import { Field, TextInput } from 'charcell/svelte';
</script>

<Field label="name" htmlFor="name" description="read out by the announcer">
  {#snippet children({ control })}
    <TextInput {...control} placeholder="doreen schmorley" />
  {/snippet}
</Field>

<div class="CharcellField CharcellField--labeled">
  <label class="CharcellField__label" for="name" id="name-label">name</label>
  <div class="CharcellField__control">
    <input
      class="CharcellTextInput CharcellTextInput--boxed"
      id="name"
      aria-describedby="name-description"
      placeholder="doreen schmorley"
    />
  </div>
  <div class="CharcellField__description" id="name-description">
    read out by the announcer
  </div>
</div>

import { Field, TextInput } from 'charcell/react';

export function FieldExample() {
  return (
    <Field
      label="name"
      htmlFor="name"
      description="read out by the announcer"
      errorMessage="give us your name"
    >
      {({ control }) => (
        <TextInput {...control} placeholder="doreen schmorley" />
      )}
    </Field>
  );
}

<script setup lang="ts">
import { Field, TextInput } from 'charcell/vue';
</script>

<template>
  <Field
    label="name"
    htmlFor="name"
    description="read out by the announcer"
    errorMessage="give us your name"
  >
    <template #default="{ control }">
      <TextInput v-bind="control" placeholder="doreen schmorley" />
    </template>
  </Field>
</template>

<script lang="ts">
  import { Field, TextInput } from 'charcell/svelte';
</script>

<Field
  label="name"
  htmlFor="name"
  description="read out by the announcer"
  errorMessage="give us your name"
>
  {#snippet children({ control })}
    <TextInput {...control} placeholder="doreen schmorley" />
  {/snippet}
</Field>

<div class="CharcellField CharcellField--labeled">
  <label class="CharcellField__label" for="name" id="name-label">name</label>
  <div class="CharcellField__control">
    <input
      class="CharcellTextInput CharcellTextInput--boxed"
      id="name"
      aria-describedby="name-error name-description"
      aria-invalid="true"
      placeholder="doreen schmorley"
    />
  </div>
  <div class="CharcellField__message" id="name-error">
    error: give us your name
  </div>
  <div class="CharcellField__description" id="name-description">
    read out by the announcer
  </div>
</div>

as text

at rest

     ┌──────────────────────┐
name │ doreen schmorley     │
     └──────────────────────┘
     read out by the announcer

hover

     ┌──────────────────────┐
name │ doreen schmorley     │
     └──────────────────────┘
     read out by the announcer

props

labelstring: The label text, on the control's row in the mid gray.
htmlForstring: The control's id: the label points at it, and the parts' ids derive from it.
labelIdstring: The label's id, for a group to reference; defaults to <htmlFor>-label.
descriptionstring: Explanatory text under the control.
errorMessagestring: A validation message under the control, led by error:.
translationsFieldTranslations: What the field says around the control: the error message's prefix (errorPrefix, error: by default).

it also takes any other attribute of its <div>.

slots

in react, the default slot is children and each named slot a prop of its name, a function where the slot hands values; in vue, a slot; in svelte, a snippet.

default{ control: FieldControl }: The control the label names. As a function, it gets control: the id, the aria-describedby and the aria-invalid to spread on the control.

usage

example

code

as text

props

slots