Field

Basic field example demonstrating core behavior.

Package: @solidiom/field
Version: 0.0.1-next.0
Status: stable

Examples

import * as Field from "@solidiom/field"
import * as Input from "@solidiom/input"

;<Field.Root required invalid={false}>
  <Field.Label>Email address</Field.Label>

  <Field.Control>
    {(controlProps) => (
      <Input.Root {...controlProps()} type="email" placeholder="you@example.com" />
    )}
  </Field.Control>

  <Field.Description>We'll never share your email.</Field.Description>
  <Field.Error>Please enter a valid email address.</Field.Error>
</Field.Root>

The Field primitive wires ARIA relationships between label, control, description, and error. The Error is shown when invalid is true, and the Description is hidden in that case. The Control’s render function receives props to spread on the underlying input element.

EmailWe'll never share your email.

View source

        export function Root(props: FieldRootProps) {
  const disabled = () => props.disabled ?? false
  const required = () => props.required ?? false
  const readOnly = () => props.readOnly ?? false
  const invalid = () => props.invalid ?? false

  const formControl = createFormControl({
    id: props.id,
    disabled,
    required,
    readOnly,
    invalid,
  })

  return (
    <FieldContext value={{ formControl, invalid, disabled, required, readOnly }}>
      <div
        class={props.class}
        style={props.style}
        {...applySemanticAttrs({
          scope: "field",
          part: "root",
          disabled: disabled(),
          required: required(),
          invalid: invalid(),
          readonly: readOnly(),
        })}
      >
        {props.children}
      </div>
    </FieldContext>
  )
}