# Field

Building blocks for form fields: labels, descriptions, errors, validation and grouped layouts.

Field is an open-source mobile component from suiss/uim for React Native and Expo, with SwiftUI and Jetpack Compose versions built from the same design tokens. The @esuiss/uim CLI copies its source into your project, so you own the code.

Source: https://uim.suiss.app/docs/components/field

![Preview](https://uim.suiss.app/previews/components-field--default.light.webp)

```tsx
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldExample() {
  return (
    <Field>
      <FieldLabel>Username</FieldLabel>
      <Input placeholder="evilrabbit" autoCapitalize="none" />
      <FieldDescription>
        Choose a unique username for your account.
      </FieldDescription>
    </Field>
  )
}
```

```swift
import EsuissUI
import SwiftUI

struct FieldDefaultDemo: View {
  @State private var username = ""

  var body: some View {
    Field {
      FieldLabel("Username")
        .accessibilityHidden(true)
      TextField("evilrabbit", text: $username)
        .textFieldStyle(.input)
        .textInputAutocapitalization(.never)
        .accessibilityLabel(Text("Username"))
      FieldDescription("Choose a unique username for your account.")
    }
  }
}
```

```kotlin
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.input.KeyboardCapitalization
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldLabel
import com.esuiss.ui.components.Input

val FieldPlainText = KeyboardOptions(capitalization = KeyboardCapitalization.None, autoCorrectEnabled = false)

@Composable
fun FieldDefault() {
    var value by rememberSaveable { mutableStateOf("") }
    Field {
        FieldLabel("Username")
        Input(
            value,
            { value = it },
            Modifier.semantics { contentDescription = "Username" },
            placeholder = "evilrabbit",
            keyboardOptions = FieldPlainText,
        )
        FieldDescription("Choose a unique username for your account.")
    }
}
```

`Field` wraps one control, such as an `Input`, `Textarea` or `Switch`, with a `FieldLabel`, an optional `FieldDescription` and a `FieldError`. It shares the field's disabled and invalid state with the control and handles validation: required values, length limits and custom `validate` functions, checked on submit, blur or change.

`FieldSet` and `FieldLegend` group related fields under a heading, and `FieldGroup` stacks fields. The `inset` variant of `FieldGroup` turns the fields into rows on a rounded secondary surface with hairlines between them, like a settings list.

## Installation

```bash title="Terminal"
npx @esuiss/uim@latest add field
```

```bash title="Terminal"
npx @esuiss/uim@latest add field --platform swift
```

```bash title="Terminal"
npx @esuiss/uim@latest add field --platform kotlin
```

The CLI also adds what it builds on: [Separator](/docs/components/separator).

### Manual

**Uniwind**

1. Install the dependencies:

```bash title="Terminal"
npx expo install cn
```

2. Add the pieces it builds on: [Separator](/docs/components/separator), and the primitives `components/primitives/field.tsx`, `components/primitives/fieldset.tsx`, `components/primitives/use-render.tsx`.

3. Copy the source into `components/ui/field.tsx`:

```tsx title="uniwind/components/ui/field.tsx"
import { cn } from "cn"
import * as React from "react"
import { Text as RNText, View } from "react-native"
import * as FieldPrimitive from "@/components/primitives/field"
import * as FieldsetPrimitive from "@/components/primitives/fieldset"
import { resolveClassName } from "@/components/primitives/use-render"
import { Separator } from "@/components/ui/separator"

type FieldGroupVariant = "default" | "inset"

type FieldOrientation = "vertical" | "horizontal" | "responsive"

interface FieldGroupItemContextValue {
  variant: FieldGroupVariant
  index: number
}

const FieldGroupItemContext =
  React.createContext<FieldGroupItemContextValue | null>(null)

const FieldSetInsetContext = React.createContext(false)

const FieldInsetContext = React.createContext(false)

function FieldSet({
  className,
  children,
  ...props
}: React.ComponentProps<typeof FieldsetPrimitive.Root>) {
  const inset = React.Children.toArray(children).some(
    (child) =>
      React.isValidElement<{ variant?: FieldGroupVariant }>(child) &&
      child.type === FieldGroup &&
      child.props.variant === "inset"
  )
  return (
    <FieldSetInsetContext.Provider value={inset}>
      <FieldsetPrimitive.Root
        className={(state) =>
          cn(
            "flex-col",
            inset ? "gap-2" : "gap-6",
            resolveClassName(className, state)
          )
        }
        {...props}
      >
        {children}
      </FieldsetPrimitive.Root>
    </FieldSetInsetContext.Provider>
  )
}

function FieldLegend({
  className,
  variant = "legend",
  ...props
}: React.ComponentProps<typeof FieldsetPrimitive.Legend> & {
  variant?: "legend" | "label"
}) {
  const inset = React.useContext(FieldSetInsetContext)
  return (
    <FieldsetPrimitive.Legend
      role={variant === "legend" ? "heading" : undefined}
      className={(state) =>
        cn(
          "mb-3 text-base font-semibold text-label",
          inset &&
            "mb-0 ps-4 text-xs font-normal uppercase text-label-secondary",
          state.disabled && "text-label-quaternary",
          resolveClassName(className, state)
        )
      }
      {...props}
    />
  )
}

function FieldGroup({
  className,
  variant = "default",
  children,
  ...props
}: React.ComponentProps<typeof View> & { variant?: FieldGroupVariant }) {
  let index = 0
  const items = React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) return child
    const value = { variant, index }
    index += 1
    return (
      <FieldGroupItemContext.Provider value={value}>
        {child}
      </FieldGroupItemContext.Provider>
    )
  })
  return (
    <FieldSetInsetContext.Provider value={false}>
      <View
        className={cn(
          "w-full flex-col gap-7",
          variant === "inset" &&
            "gap-0 overflow-hidden rounded-2xl bg-surface-secondary",
          className
        )}
        {...props}
      >
        {items}
      </View>
    </FieldSetInsetContext.Provider>
  )
}

const ORIENTATION_CLASS: Record<FieldOrientation, string> = {
  vertical: "flex-col",
  horizontal: "flex-row items-center",
  responsive: "flex-col md:flex-row md:items-center",
}

function Field({
  className,
  orientation = "vertical",
  children,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Root> & {
  orientation?: FieldOrientation
}) {
  const item = React.useContext(FieldGroupItemContext)
  const inset = item?.variant === "inset"
  return (
    <FieldGroupItemContext.Provider value={null}>
      <FieldInsetContext.Provider value={inset}>
        <FieldPrimitive.Root
          className={(state) =>
            cn(
              "w-full gap-3",
              ORIENTATION_CLASS[orientation],
              inset && "relative min-h-11 justify-center px-4 py-1.5",
              resolveClassName(className, state)
            )
          }
          {...props}
        >
          {inset && item.index > 0 ? (
            <View className="absolute end-0 start-4 top-0 h-px bg-separator" />
          ) : null}
          {children}
        </FieldPrimitive.Root>
      </FieldInsetContext.Provider>
    </FieldGroupItemContext.Provider>
  )
}

function FieldContent({
  className,
  ...props
}: React.ComponentProps<typeof View>) {
  return <View className={cn("flex-1 flex-col gap-1", className)} {...props} />
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Label>) {
  const inset = React.useContext(FieldInsetContext)
  return (
    <FieldPrimitive.Label
      className={(state) =>
        cn(
          "text-base font-semibold text-label",
          inset && "font-normal",
          state.disabled && "text-label-quaternary",
          resolveClassName(className, state)
        )
      }
      {...props}
    />
  )
}

function FieldTitle({
  className,
  ...props
}: React.ComponentProps<typeof RNText>) {
  const field = FieldPrimitive.useFieldRootContext()
  return (
    <RNText
      className={cn(
        "text-base font-semibold text-label",
        field.state.disabled && "text-label-quaternary",
        className
      )}
      {...props}
    />
  )
}

function FieldDescription({
  className,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Description>) {
  const inset = React.useContext(FieldSetInsetContext)
  return (
    <FieldPrimitive.Description
      className={(state) =>
        cn(
          "text-start text-sm font-normal text-label-secondary",
          inset && "ps-4 text-xs",
          resolveClassName(className, state)
        )
      }
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<typeof View> & { children?: React.ReactNode }) {
  return (
    <View
      className={cn("relative -my-2 h-5 justify-center", className)}
      {...props}
    >
      <Separator className="absolute start-0 top-1/2" />
      {children ? (
        <RNText className="self-center bg-surface px-2 text-sm text-label-secondary">
          {children}
        </RNText>
      ) : null}
    </View>
  )
}

function FieldError({
  className,
  children,
  errors,
  match,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Error> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const messages = React.useMemo(() => {
    if (!errors?.length) return []
    return [
      ...new Set(
        errors
          .map((error) => error?.message)
          .filter((message): message is string => Boolean(message))
      ),
    ]
  }, [errors])

  const content =
    children ??
    (messages.length === 1
      ? messages[0]
      : messages.length > 1
        ? messages.map((message) => `• ${message}`).join("\n")
        : undefined)

  return (
    <FieldPrimitive.Error
      match={match ?? (content !== undefined ? true : undefined)}
      className={(state) =>
        cn(
          "text-sm font-normal text-danger",
          resolveClassName(className, state)
        )
      }
      {...props}
    >
      {content}
    </FieldPrimitive.Error>
  )
}

export {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
}
```

4. Update the import paths to match your project.

**NativeWind**

1. Install the dependencies:

```bash title="Terminal"
npx expo install cn
```

2. Add the pieces it builds on: [Separator](/docs/components/separator), and the primitives `components/primitives/field.tsx`, `components/primitives/fieldset.tsx`, `components/primitives/use-render.tsx`.

3. Copy the source into `components/ui/field.tsx`:

```tsx title="nativewind/components/ui/field.tsx"
import { cn } from "cn"
import * as React from "react"
import { Text as RNText, View } from "react-native"
import * as FieldPrimitive from "@/components/primitives/field"
import * as FieldsetPrimitive from "@/components/primitives/fieldset"
import { resolveClassName } from "@/components/primitives/use-render"
import { Separator } from "@/components/ui/separator"

type FieldGroupVariant = "default" | "inset"

type FieldOrientation = "vertical" | "horizontal" | "responsive"

interface FieldGroupItemContextValue {
  variant: FieldGroupVariant
  index: number
}

const FieldGroupItemContext =
  React.createContext<FieldGroupItemContextValue | null>(null)

const FieldSetInsetContext = React.createContext(false)

const FieldInsetContext = React.createContext(false)

function FieldSet({
  className,
  children,
  ...props
}: React.ComponentProps<typeof FieldsetPrimitive.Root>) {
  const inset = React.Children.toArray(children).some(
    (child) =>
      React.isValidElement<{ variant?: FieldGroupVariant }>(child) &&
      child.type === FieldGroup &&
      child.props.variant === "inset"
  )
  return (
    <FieldSetInsetContext.Provider value={inset}>
      <FieldsetPrimitive.Root
        className={(state) =>
          cn(
            "flex-col",
            inset ? "gap-2" : "gap-6",
            resolveClassName(className, state)
          )
        }
        {...props}
      >
        {children}
      </FieldsetPrimitive.Root>
    </FieldSetInsetContext.Provider>
  )
}

function FieldLegend({
  className,
  variant = "legend",
  ...props
}: React.ComponentProps<typeof FieldsetPrimitive.Legend> & {
  variant?: "legend" | "label"
}) {
  const inset = React.useContext(FieldSetInsetContext)
  return (
    <FieldsetPrimitive.Legend
      role={variant === "legend" ? "heading" : undefined}
      className={(state) =>
        cn(
          "mb-3 text-base font-semibold text-label",
          inset &&
            "mb-0 ps-4 text-xs font-normal uppercase text-label-secondary",
          state.disabled && "text-label-quaternary",
          resolveClassName(className, state)
        )
      }
      {...props}
    />
  )
}

function FieldGroup({
  className,
  variant = "default",
  children,
  ...props
}: React.ComponentProps<typeof View> & { variant?: FieldGroupVariant }) {
  let index = 0
  const items = React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) return child
    const value = { variant, index }
    index += 1
    return (
      <FieldGroupItemContext.Provider value={value}>
        {child}
      </FieldGroupItemContext.Provider>
    )
  })
  return (
    <FieldSetInsetContext.Provider value={false}>
      <View
        className={cn(
          "w-full flex-col gap-7",
          variant === "inset" &&
            "gap-0 overflow-hidden rounded-2xl bg-surface-secondary",
          className
        )}
        {...props}
      >
        {items}
      </View>
    </FieldSetInsetContext.Provider>
  )
}

const ORIENTATION_CLASS: Record<FieldOrientation, string> = {
  vertical: "flex-col",
  horizontal: "flex-row items-center",
  responsive: "flex-col md:flex-row md:items-center",
}

function Field({
  className,
  orientation = "vertical",
  children,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Root> & {
  orientation?: FieldOrientation
}) {
  const item = React.useContext(FieldGroupItemContext)
  const inset = item?.variant === "inset"
  return (
    <FieldGroupItemContext.Provider value={null}>
      <FieldInsetContext.Provider value={inset}>
        <FieldPrimitive.Root
          className={(state) =>
            cn(
              "w-full gap-3",
              ORIENTATION_CLASS[orientation],
              inset && "relative min-h-11 justify-center px-4 py-1.5",
              resolveClassName(className, state)
            )
          }
          {...props}
        >
          {inset && item.index > 0 ? (
            <View className="absolute end-0 start-4 top-0 h-px bg-separator" />
          ) : null}
          {children}
        </FieldPrimitive.Root>
      </FieldInsetContext.Provider>
    </FieldGroupItemContext.Provider>
  )
}

function FieldContent({
  className,
  ...props
}: React.ComponentProps<typeof View>) {
  return <View className={cn("flex-1 flex-col gap-1", className)} {...props} />
}

function FieldLabel({
  className,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Label>) {
  const inset = React.useContext(FieldInsetContext)
  return (
    <FieldPrimitive.Label
      className={(state) =>
        cn(
          "text-base font-semibold text-label",
          inset && "font-normal",
          state.disabled && "text-label-quaternary",
          resolveClassName(className, state)
        )
      }
      {...props}
    />
  )
}

function FieldTitle({
  className,
  ...props
}: React.ComponentProps<typeof RNText>) {
  const field = FieldPrimitive.useFieldRootContext()
  return (
    <RNText
      className={cn(
        "text-base font-semibold text-label",
        field.state.disabled && "text-label-quaternary",
        className
      )}
      {...props}
    />
  )
}

function FieldDescription({
  className,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Description>) {
  const inset = React.useContext(FieldSetInsetContext)
  return (
    <FieldPrimitive.Description
      className={(state) =>
        cn(
          "text-start text-sm font-normal text-label-secondary",
          inset && "ps-4 text-xs",
          resolveClassName(className, state)
        )
      }
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  className,
  ...props
}: React.ComponentProps<typeof View> & { children?: React.ReactNode }) {
  return (
    <View
      className={cn("relative -my-2 h-5 justify-center", className)}
      {...props}
    >
      <Separator className="absolute start-0 top-1/2" />
      {children ? (
        <RNText className="self-center bg-surface px-2 text-sm text-label-secondary">
          {children}
        </RNText>
      ) : null}
    </View>
  )
}

function FieldError({
  className,
  children,
  errors,
  match,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Error> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const messages = React.useMemo(() => {
    if (!errors?.length) return []
    return [
      ...new Set(
        errors
          .map((error) => error?.message)
          .filter((message): message is string => Boolean(message))
      ),
    ]
  }, [errors])

  const content =
    children ??
    (messages.length === 1
      ? messages[0]
      : messages.length > 1
        ? messages.map((message) => `• ${message}`).join("\n")
        : undefined)

  return (
    <FieldPrimitive.Error
      match={match ?? (content !== undefined ? true : undefined)}
      className={(state) =>
        cn(
          "text-sm font-normal text-danger",
          resolveClassName(className, state)
        )
      }
      {...props}
    >
      {content}
    </FieldPrimitive.Error>
  )
}

export {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
}
```

4. Update the import paths to match your project.

**StyleSheet**

1. Add the pieces it builds on: [Separator](/docs/components/separator), and the primitives `components/primitives/field.tsx`, `components/primitives/fieldset.tsx`, `components/primitives/use-render.tsx`.

2. Copy the source into `components/ui/field.tsx`:

```tsx title="stylesheet/components/ui/field.tsx"
import * as React from "react"
import {
  Text as RNText,
  StyleSheet,
  useWindowDimensions,
  View,
} from "react-native"
import * as FieldPrimitive from "@/components/primitives/field"
import * as FieldsetPrimitive from "@/components/primitives/fieldset"
import { Separator } from "@/components/ui/separator"
import { fontSize, radius, useTheme } from "@/components/ui/theme"

type FieldGroupVariant = "default" | "inset"

type FieldOrientation = "vertical" | "horizontal" | "responsive"

interface FieldGroupItemContextValue {
  variant: FieldGroupVariant
  index: number
}

const FieldGroupItemContext =
  React.createContext<FieldGroupItemContextValue | null>(null)

const FieldSetInsetContext = React.createContext(false)

const FieldInsetContext = React.createContext(false)

const styles = StyleSheet.create({
  set: { flexDirection: "column", gap: 24 },
  setInset: { gap: 8 },
  legend: { ...fontSize.base, marginBottom: 12, fontWeight: "600" },
  legendInset: {
    ...fontSize.xs,
    marginBottom: 0,
    paddingStart: 16,
    fontWeight: "400",
    textTransform: "uppercase",
  },
  group: { width: "100%", flexDirection: "column", gap: 28 },
  groupInset: { gap: 0, overflow: "hidden", borderRadius: radius["2xl"] },
  field: { width: "100%", gap: 12 },
  vertical: { flexDirection: "column" },
  horizontal: { flexDirection: "row", alignItems: "center" },
  fieldInset: {
    position: "relative",
    minHeight: 44,
    justifyContent: "center",
    paddingHorizontal: 16,
    paddingVertical: 6,
  },
  insetDivider: {
    position: "absolute",
    top: 0,
    end: 0,
    start: 16,
    height: 1,
  },
  content: { flex: 1, flexDirection: "column", gap: 4 },
  label: { ...fontSize.base, fontWeight: "600" },
  labelInset: { fontWeight: "400" },
  title: { ...fontSize.base, fontWeight: "600" },
  description: { ...fontSize.sm, fontWeight: "400", textAlign: "auto" },
  descriptionInset: { ...fontSize.xs, paddingStart: 16 },
  separator: {
    position: "relative",
    marginVertical: -8,
    height: 20,
    justifyContent: "center",
  },
  separatorLine: { position: "absolute", top: "50%", start: 0 },
  separatorContent: {
    ...fontSize.sm,
    alignSelf: "center",
    paddingHorizontal: 8,
  },
  error: { ...fontSize.sm, fontWeight: "400" },
})

function FieldSet({
  style,
  children,
  ...props
}: React.ComponentProps<typeof FieldsetPrimitive.Root>) {
  const inset = React.Children.toArray(children).some(
    (child) =>
      React.isValidElement<{ variant?: FieldGroupVariant }>(child) &&
      child.type === FieldGroup &&
      child.props.variant === "inset"
  )
  return (
    <FieldSetInsetContext.Provider value={inset}>
      <FieldsetPrimitive.Root
        style={(state) => [
          styles.set,
          inset && styles.setInset,
          typeof style === "function" ? style(state) : style,
        ]}
        {...props}
      >
        {children}
      </FieldsetPrimitive.Root>
    </FieldSetInsetContext.Provider>
  )
}

function FieldLegend({
  style,
  variant = "legend",
  ...props
}: React.ComponentProps<typeof FieldsetPrimitive.Legend> & {
  variant?: "legend" | "label"
}) {
  const { colors } = useTheme()
  const inset = React.useContext(FieldSetInsetContext)
  return (
    <FieldsetPrimitive.Legend
      role={variant === "legend" ? "heading" : undefined}
      style={(state) => [
        styles.legend,
        { color: state.disabled ? colors.labelQuaternary : colors.label },
        inset && [styles.legendInset, { color: colors.labelSecondary }],
        typeof style === "function" ? style(state) : style,
      ]}
      {...props}
    />
  )
}

function FieldGroup({
  style,
  variant = "default",
  children,
  ...props
}: React.ComponentProps<typeof View> & { variant?: FieldGroupVariant }) {
  const { colors } = useTheme()
  let index = 0
  const items = React.Children.map(children, (child) => {
    if (!React.isValidElement(child)) return child
    const value = { variant, index }
    index += 1
    return (
      <FieldGroupItemContext.Provider value={value}>
        {child}
      </FieldGroupItemContext.Provider>
    )
  })
  return (
    <FieldSetInsetContext.Provider value={false}>
      <View
        style={[
          styles.group,
          variant === "inset" && [
            styles.groupInset,
            { backgroundColor: colors.surfaceSecondary },
          ],
          style,
        ]}
        {...props}
      >
        {items}
      </View>
    </FieldSetInsetContext.Provider>
  )
}

function Field({
  style,
  orientation = "vertical",
  children,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Root> & {
  orientation?: FieldOrientation
}) {
  const { colors } = useTheme()
  const { width } = useWindowDimensions()
  const item = React.useContext(FieldGroupItemContext)
  const inset = item?.variant === "inset"
  const horizontal =
    orientation === "horizontal" ||
    (orientation === "responsive" && width >= 768)
  return (
    <FieldGroupItemContext.Provider value={null}>
      <FieldInsetContext.Provider value={inset}>
        <FieldPrimitive.Root
          style={(state) => [
            styles.field,
            horizontal ? styles.horizontal : styles.vertical,
            inset && styles.fieldInset,
            typeof style === "function" ? style(state) : style,
          ]}
          {...props}
        >
          {inset && item.index > 0 ? (
            <View
              style={[
                styles.insetDivider,
                { backgroundColor: colors.separator },
              ]}
            />
          ) : null}
          {children}
        </FieldPrimitive.Root>
      </FieldInsetContext.Provider>
    </FieldGroupItemContext.Provider>
  )
}

function FieldContent({ style, ...props }: React.ComponentProps<typeof View>) {
  return <View style={[styles.content, style]} {...props} />
}

function FieldLabel({
  style,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Label>) {
  const { colors } = useTheme()
  const inset = React.useContext(FieldInsetContext)
  return (
    <FieldPrimitive.Label
      style={(state) => [
        styles.label,
        inset && styles.labelInset,
        { color: state.disabled ? colors.labelQuaternary : colors.label },
        typeof style === "function" ? style(state) : style,
      ]}
      {...props}
    />
  )
}

function FieldTitle({ style, ...props }: React.ComponentProps<typeof RNText>) {
  const { colors } = useTheme()
  const field = FieldPrimitive.useFieldRootContext()
  return (
    <RNText
      style={[
        styles.title,
        {
          color: field.state.disabled ? colors.labelQuaternary : colors.label,
        },
        style,
      ]}
      {...props}
    />
  )
}

function FieldDescription({
  style,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Description>) {
  const { colors } = useTheme()
  const inset = React.useContext(FieldSetInsetContext)
  return (
    <FieldPrimitive.Description
      style={(state) => [
        styles.description,
        inset && styles.descriptionInset,
        { color: colors.labelSecondary },
        typeof style === "function" ? style(state) : style,
      ]}
      {...props}
    />
  )
}

function FieldSeparator({
  children,
  style,
  ...props
}: React.ComponentProps<typeof View> & { children?: React.ReactNode }) {
  const { colors } = useTheme()
  return (
    <View style={[styles.separator, style]} {...props}>
      <Separator style={styles.separatorLine} />
      {children ? (
        <RNText
          style={[
            styles.separatorContent,
            {
              backgroundColor: colors.surface,
              color: colors.labelSecondary,
            },
          ]}
        >
          {children}
        </RNText>
      ) : null}
    </View>
  )
}

function FieldError({
  style,
  children,
  errors,
  match,
  ...props
}: React.ComponentProps<typeof FieldPrimitive.Error> & {
  errors?: Array<{ message?: string } | undefined>
}) {
  const { colors } = useTheme()
  const messages = React.useMemo(() => {
    if (!errors?.length) return []
    return [
      ...new Set(
        errors
          .map((error) => error?.message)
          .filter((message): message is string => Boolean(message))
      ),
    ]
  }, [errors])

  const content =
    children ??
    (messages.length === 1
      ? messages[0]
      : messages.length > 1
        ? messages.map((message) => `• ${message}`).join("\n")
        : undefined)

  return (
    <FieldPrimitive.Error
      match={match ?? (content !== undefined ? true : undefined)}
      style={(state) => [
        styles.error,
        { color: colors.danger },
        typeof style === "function" ? style(state) : style,
      ]}
      {...props}
    >
      {content}
    </FieldPrimitive.Error>
  )
}

export {
  Field,
  FieldContent,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSeparator,
  FieldSet,
  FieldTitle,
}
```

3. Update the import paths to match your project.

**SwiftUI**

1. Target iOS 17 or later.

2. Copy the theme files every view uses:

```swift title="swift/Theme/Theme.swift"
import SwiftUI
import UIKit

struct RGBA: Sendable {
  let red: CGFloat
  let green: CGFloat
  let blue: CGFloat
  let alpha: CGFloat

  init(_ hex: UInt32, _ alpha: CGFloat = 1) {
    red = CGFloat((hex >> 16) & 0xFF) / 255
    green = CGFloat((hex >> 8) & 0xFF) / 255
    blue = CGFloat(hex & 0xFF) / 255
    self.alpha = alpha
  }

  var uiColor: UIColor {
    UIColor(red: red, green: green, blue: blue, alpha: alpha)
  }
}

extension Color {
  static func adaptive(light: RGBA, dark: RGBA) -> Color {
    let lightColor = light.uiColor
    let darkColor = dark.uiColor
    return Color(uiColor: UIColor { traits in
      traits.userInterfaceStyle == .dark ? darkColor : lightColor
    })
  }
}

public struct TextStyle: Sendable, Hashable {
  public let size: CGFloat
  public let lineHeight: CGFloat
  public let letterSpacing: CGFloat

  public init(size: CGFloat, lineHeight: CGFloat, letterSpacing: CGFloat) {
    self.size = size
    self.lineHeight = lineHeight
    self.letterSpacing = letterSpacing
  }

  public func font(weight: Font.Weight = .regular) -> Font {
    .system(size: size, weight: weight)
  }

  public var lineSpacing: CGFloat {
    max(0, lineHeight - UIFont.systemFont(ofSize: size).lineHeight)
  }
}

extension Hashable where Self == Font {
  public static func textStyle(_ style: TextStyle, weight: Font.Weight = .regular) -> Font {
    style.font(weight: weight)
  }
}

private struct TextStyleModifier: ViewModifier {
  let style: TextStyle
  let weight: Font.Weight

  func body(content: Content) -> some View {
    content
      .font(style.font(weight: weight))
      .tracking(style.letterSpacing)
      .lineSpacing(style.lineSpacing)
      .padding(.vertical, style.lineSpacing / 2)
  }
}

extension View {
  public func textStyle(_ style: TextStyle, weight: Font.Weight = .regular) -> some View {
    modifier(TextStyleModifier(style: style, weight: weight))
  }
}

public struct Shadow: Sendable, Hashable {
  public let color: Color
  public let radius: CGFloat
  public let x: CGFloat
  public let y: CGFloat

  public init(color: Color, radius: CGFloat, x: CGFloat = 0, y: CGFloat = 0) {
    self.color = color
    self.radius = radius
    self.x = x
    self.y = y
  }
}

extension View {
  public func shadow(_ shadow: Shadow) -> some View {
    self.shadow(color: shadow.color, radius: shadow.radius, x: shadow.x, y: shadow.y)
  }
}
```

```swift title="swift/Theme/Tokens.swift"
import SwiftUI

extension Color {
  public static let surface = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let surfaceSecondary = Color.adaptive(light: .init(0xF5F5F7), dark: .init(0x161617))
  public static let surfaceTertiary = Color.adaptive(light: .init(0xE8E8ED), dark: .init(0x2C2C2E))
  public static let surfaceRaised = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x1D1D1F))
  public static let label = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let labelSecondary = Color.adaptive(light: .init(0x6E6E73), dark: .init(0xA1A1A6))
  public static let labelTertiary = Color.adaptive(light: .init(0x86868B), dark: .init(0x86868B))
  public static let labelQuaternary = Color.adaptive(light: .init(0xD2D2D7), dark: .init(0x424245))
  public static let control = Color.adaptive(light: .init(0x000000, 0.04), dark: .init(0xFFFFFF, 0.1))
  public static let controlPressed = Color.adaptive(light: .init(0x000000, 0.12), dark: .init(0xFFFFFF, 0.22))
  public static let controlSelected = Color.adaptive(light: .init(0x1D1D1F), dark: .init(0xF5F5F7))
  public static let controlDisabled = Color.adaptive(light: .init(0x000000, 0.03), dark: .init(0xFFFFFF, 0.05))
  public static let onControlSelected = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0x000000))
  public static let itemPressed = Color.adaptive(light: .init(0x000000, 0.08), dark: .init(0xFFFFFF, 0.12))
  public static let itemSelected = Color.adaptive(light: .init(0x000000, 0.06), dark: .init(0xFFFFFF, 0.1))
  public static let separator = Color.adaptive(light: .init(0xD2D2D7), dark: .init(0x424245))
  public static let separatorStrong = Color.adaptive(light: .init(0x86868B), dark: .init(0x6E6E73))
  public static let accent = Color.adaptive(light: .init(0x0071E3), dark: .init(0x0071E3))
  public static let accentPressed = Color.adaptive(light: .init(0x005BB8), dark: .init(0x004D9E))
  public static let accentSelected = Color.adaptive(light: .init(0x0071E3), dark: .init(0x0071E3))
  public static let accentDisabled = Color.adaptive(light: .init(0x0071E3, 0.4), dark: .init(0x0071E3, 0.4))
  public static let onAccent = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let accentSurface = Color.adaptive(light: .init(0x0071E3, 0.09), dark: .init(0x0071E3, 0.18))
  public static let accentSurfacePressed = Color.adaptive(light: .init(0x0071E3, 0.18), dark: .init(0x0071E3, 0.3))
  public static let link = Color.adaptive(light: .init(0x0066CC), dark: .init(0x2997FF))
  public static let focus = Color.adaptive(light: .init(0x0071E3), dark: .init(0x0071E3))
  public static let scrim = Color.adaptive(light: .init(0x000000, 0.48), dark: .init(0x000000, 0.48))
  public static let media = Color.adaptive(light: .init(0x000000), dark: .init(0x000000))
  public static let onMedia = Color.adaptive(light: .init(0xFFFFFF), dark: .init(0xFFFFFF))
  public static let danger = Color.adaptive(light: .init(0xD0000A), dark: .init(0xFF5447))
  public static let dangerSurface = Color.adaptive(light: .init(0xD70015, 0.08), dark: .init(0xFF453A, 0.2))
  public static let dangerSurfacePressed = Color.adaptive(light: .init(0xD70015, 0.16), dark: .init(0xFF453A, 0.36))
  public static let success = Color.adaptive(light: .init(0x008009), dark: .init(0x30D158))
  public static let successSurface = Color.adaptive(light: .init(0xEFFAF1), dark: .init(0x30D158, 0.16))
  public static let warning = Color.adaptive(light: .init(0xB64400), dark: .init(0xFF9F0A))
  public static let warningSurface = Color.adaptive(light: .init(0xFFF5EA), dark: .init(0xFF9F0A, 0.16))
}

public enum Radius {
  public static let xs: CGFloat = 3
  public static let sm: CGFloat = 5
  public static let md: CGFloat = 8
  public static let lg: CGFloat = 10
  public static let xl: CGFloat = 12
  public static let xl2: CGFloat = 18
  public static let xl3: CGFloat = 28
  public static let full: CGFloat = 9999
}

extension TextStyle {
  public static let xs3 = TextStyle(size: 11, lineHeight: 13, letterSpacing: 0.066)
  public static let xs2 = TextStyle(size: 12, lineHeight: 16, letterSpacing: 0)
  public static let xs = TextStyle(size: 13, lineHeight: 18, letterSpacing: -0.078)
  public static let sm = TextStyle(size: 15, lineHeight: 20, letterSpacing: -0.24)
  public static let md = TextStyle(size: 16, lineHeight: 21, letterSpacing: -0.32)
  public static let base = TextStyle(size: 17, lineHeight: 22, letterSpacing: -0.442)
  public static let lg = TextStyle(size: 20, lineHeight: 25, letterSpacing: -0.46)
  public static let xl = TextStyle(size: 22, lineHeight: 28, letterSpacing: -0.264)
  public static let xl2 = TextStyle(size: 28, lineHeight: 34, letterSpacing: 0.392)
  public static let xl3 = TextStyle(size: 34, lineHeight: 41, letterSpacing: 0.408)

  public static let allCases: [TextStyle] = [.xs3, .xs2, .xs, .sm, .md, .base, .lg, .xl, .xl2, .xl3]
}

extension Shadow {
  public static let md = Shadow(color: .black.opacity(0.08), radius: 6, x: 2, y: 4)
  public static let lg = Shadow(color: .black.opacity(0.12), radius: 12, y: 4)
}
```

3. Copy the source and every file it uses:

```swift title="swift/Components/Field.swift"
import SwiftUI

extension EnvironmentValues {
  @Entry public var isInvalid = false
  @Entry var fieldInset = false
  @Entry var fieldGroupInset = false
  @Entry var fieldSetInset = false
}

extension View {
  public func invalid(_ isInvalid: Bool = true) -> some View {
    environment(\.isInvalid, isInvalid)
  }
}

public enum FieldOrientation: CaseIterable, Sendable {
  case vertical, horizontal
}

public struct Field<Content: View>: View {
  let orientation: FieldOrientation
  let invalid: Bool?
  let content: Content

  @Environment(\.fieldGroupInset) private var inset
  @Environment(\.isInvalid) private var inheritedInvalid

  public init(
    orientation: FieldOrientation = .vertical,
    invalid: Bool? = nil,
    @ViewBuilder content: () -> Content
  ) {
    self.orientation = orientation
    self.invalid = invalid
    self.content = content()
  }

  public var body: some View {
    Group {
      switch orientation {
      case .vertical:
        VStack(alignment: .leading, spacing: 12) { content }
      case .horizontal:
        HStack(alignment: .center, spacing: 12) { content }
      }
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .padding(.horizontal, inset ? 16 : 0)
    .padding(.vertical, inset ? 6 : 0)
    .frame(minHeight: inset ? 44 : nil)
    .overlay(alignment: .top) {
      if inset {
        Color.separator
          .frame(height: 1)
          .padding(.leading, 16)
          .offset(y: -1)
      }
    }
    .environment(\.fieldInset, inset)
    .environment(\.fieldGroupInset, false)
    .environment(\.isInvalid, invalid ?? inheritedInvalid)
  }
}

public struct FieldContent<Content: View>: View {
  let content: Content

  public init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  public var body: some View {
    VStack(alignment: .leading, spacing: 4) {
      content
    }
    .frame(maxWidth: .infinity, alignment: .leading)
  }
}

public struct FieldTitle: View {
  let text: Text

  @Environment(\.isEnabled) private var isEnabled

  public init(_ title: LocalizedStringKey) {
    text = Text(title)
  }

  public init<S: StringProtocol>(_ title: S) {
    text = Text(title)
  }

  public var body: some View {
    text
      .scaledTextStyle(.base, weight: .semibold)
      .foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
  }
}

public struct FieldDescription: View {
  let text: Text

  @Environment(\.fieldSetInset) private var inset

  public init(_ description: LocalizedStringKey) {
    text = Text(description)
  }

  public init<S: StringProtocol>(_ description: S) {
    text = Text(description)
  }

  public var body: some View {
    text
      .scaledTextStyle(inset ? .xs : .sm)
      .foregroundStyle(Color.labelSecondary)
      .multilineTextAlignment(.leading)
      .fixedSize(horizontal: false, vertical: true)
      .padding(.leading, inset ? 16 : 0)
  }
}

public struct FieldError: View {
  let messages: [String]
  let text: Text?

  public init(_ message: LocalizedStringKey) {
    messages = []
    text = Text(message)
  }

  public init(errors: [String?]) {
    var seen = Set<String>()
    messages = errors.compactMap { $0 }.filter { !$0.isEmpty && seen.insert($0).inserted }
    text = nil
  }

  public var body: some View {
    if let content {
      content
        .scaledTextStyle(.sm)
        .foregroundStyle(Color.danger)
        .multilineTextAlignment(.leading)
        .fixedSize(horizontal: false, vertical: true)
    }
  }

  private var content: Text? {
    if let text { return text }
    switch messages.count {
    case 0: return nil
    case 1: return Text(verbatim: messages[0])
    default: return Text(verbatim: messages.map { "\u{2022} \($0)" }.joined(separator: "\n"))
    }
  }
}

public enum FieldGroupVariant: CaseIterable, Sendable {
  case `default`, inset
}

public struct FieldGroup<Content: View>: View {
  let variant: FieldGroupVariant
  let content: Content

  public init(_ variant: FieldGroupVariant = .default, @ViewBuilder content: () -> Content) {
    self.variant = variant
    self.content = content()
  }

  public var body: some View {
    styled
      .environment(\.fieldGroupInset, variant == .inset)
      .environment(\.fieldSetInset, false)
      .transformPreference(FieldSetInsetKey.self) { $0 = variant == .inset }
  }

  @ViewBuilder private var styled: some View {
    let stack = VStack(alignment: .leading, spacing: variant == .inset ? 0 : 28) {
      content
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    if variant == .inset {
      let shape = RoundedRectangle(cornerRadius: Radius.xl2, style: .continuous)
      stack
        .background(Color.surfaceSecondary, in: shape)
        .clipShape(shape)
    } else {
      stack
    }
  }
}

struct FieldSetInsetKey: PreferenceKey {
  static let defaultValue = false

  static func reduce(value: inout Bool, nextValue: () -> Bool) {
    value = value || nextValue()
  }
}

public struct FieldSet<Content: View>: View {
  let content: Content

  @State private var inset = false

  public init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  public var body: some View {
    VStack(alignment: .leading, spacing: inset ? 8 : 24) {
      content
    }
    .frame(maxWidth: .infinity, alignment: .leading)
    .environment(\.fieldSetInset, inset)
    .onPreferenceChange(FieldSetInsetKey.self) { inset = $0 }
    .transformPreference(FieldSetInsetKey.self) { $0 = false }
    .accessibilityElement(children: .contain)
  }
}

public struct FieldLegend: View {
  public enum Variant: CaseIterable, Sendable {
    case legend, label
  }

  let text: Text
  let variant: Variant

  @Environment(\.fieldSetInset) private var inset
  @Environment(\.isEnabled) private var isEnabled

  public init(_ title: LocalizedStringKey, variant: Variant = .legend) {
    text = Text(title)
    self.variant = variant
  }

  public init<S: StringProtocol>(_ title: S, variant: Variant = .legend) {
    text = Text(title)
    self.variant = variant
  }

  public var body: some View {
    Group {
      if inset {
        text
          .textCase(.uppercase)
          .scaledTextStyle(.xs)
          .foregroundStyle(isEnabled ? Color.labelSecondary : .labelQuaternary)
          .padding(.leading, 16)
      } else {
        text
          .scaledTextStyle(.base, weight: .semibold)
          .foregroundStyle(isEnabled ? Color.label : .labelQuaternary)
          .padding(.bottom, 12)
      }
    }
    .accessibilityAddTraits(variant == .legend ? .isHeader : [])
  }
}

public struct FieldSeparator<Content: View>: View {
  let content: Content

  public init(@ViewBuilder content: () -> Content) {
    self.content = content()
  }

  public var body: some View {
    ZStack {
      Separator()
      content
        .scaledTextStyle(.sm)
        .foregroundStyle(Color.labelSecondary)
        .padding(.horizontal, 8)
        .background(Color.surface)
    }
    .frame(minHeight: 20)
    .padding(.vertical, -8)
  }
}

extension FieldSeparator where Content == EmptyView {
  public init() {
    self.init { EmptyView() }
  }
}

extension FieldSeparator where Content == Text {
  public init(_ title: LocalizedStringKey) {
    self.init { Text(title) }
  }
}
```

```swift title="swift/Components/Separator.swift"
import SwiftUI

public struct Separator: View {
  let orientation: Axis

  public init(_ orientation: Axis = .horizontal) {
    self.orientation = orientation
  }

  public var body: some View {
    Rectangle()
      .fill(Color.separator)
      .frame(width: orientation == .vertical ? 1 : nil, height: orientation == .horizontal ? 1 : nil)
      .frame(maxWidth: orientation == .horizontal ? .infinity : nil, maxHeight: orientation == .vertical ? .infinity : nil)
      .accessibilityHidden(true)
  }
}
```

```swift title="swift/Components/TextVariant.swift"
import SwiftUI

public enum TextVariant: CaseIterable, Sendable {
  case `default`, h1, h2, h3, h4, p, blockquote, code, lead, large, small, muted

  var style: TextStyle {
    switch self {
    case .h1: .xl3
    case .h2: .xl2
    case .h3: .xl
    case .h4, .lead, .large: .lg
    case .code, .small, .muted: .sm
    default: .base
    }
  }

  var weight: Font.Weight {
    switch self {
    case .h1, .h2: .bold
    case .h3, .h4, .large, .code: .semibold
    case .small: .medium
    default: .regular
    }
  }

  var color: Color {
    switch self {
    case .lead, .muted: .labelSecondary
    default: .label
    }
  }

  var isHeading: Bool {
    switch self {
    case .h1, .h2, .h3, .h4: true
    default: false
    }
  }
}

private struct TextVariantModifier: ViewModifier {
  let variant: TextVariant

  func body(content: Content) -> some View {
    switch variant {
    case .blockquote:
      styled(content)
        .italic()
        .padding(.leading, 12)
        .overlay(alignment: .leading) {
          Rectangle().fill(Color.separator).frame(width: 2)
        }
        .padding(.top, 16)
    case .code:
      styled(content)
        .monospaced()
        .padding(.horizontal, 4)
        .padding(.vertical, 2)
        .background(Color.surfaceSecondary, in: RoundedRectangle(cornerRadius: Radius.sm, style: .continuous))
    case .p:
      styled(content).padding(.top, 12)
    default:
      styled(content)
    }
  }

  private func styled(_ content: Content) -> some View {
    content
      .scaledTextStyle(variant.style, weight: variant.weight)
      .foregroundStyle(variant.color)
      .accessibilityAddTraits(variant.isHeading ? .isHeader : [])
  }
}

extension View {
  public func textVariant(_ variant: TextVariant) -> some View {
    modifier(TextVariantModifier(variant: variant))
  }
}

private struct ScaledTextStyleModifier: ViewModifier {
  let style: TextStyle
  let weight: Font.Weight

  @ScaledMetric(relativeTo: .body) private var scale: CGFloat = 1

  func body(content: Content) -> some View {
    let size = style.size * scale
    let lineSpacing = max(0, style.lineHeight * scale - UIFont.systemFont(ofSize: size).lineHeight)
    content
      .font(.system(size: size, weight: weight))
      .tracking(style.letterSpacing)
      .lineSpacing(lineSpacing)
      .padding(.vertical, lineSpacing / 2)
  }
}

extension View {
  func scaledTextStyle(_ style: TextStyle, weight: Font.Weight = .regular) -> some View {
    modifier(ScaledTextStyleModifier(style: style, weight: weight))
  }

  func scaledFont(_ style: TextStyle, weight: Font.Weight = .regular) -> some View {
    modifier(ScaledFontModifier(style: style, weight: weight))
  }
}

private struct ScaledFontModifier: ViewModifier {
  let style: TextStyle
  let weight: Font.Weight

  @ScaledMetric(relativeTo: .body) private var scale: CGFloat = 1

  func body(content: Content) -> some View {
    content
      .font(.system(size: style.size * scale, weight: weight))
      .tracking(style.letterSpacing)
  }
}
```

4. Add the files to your app target.

**Jetpack Compose**

1. Set `minSdk` to 24 or higher and add the dependencies:

```kotlin title="build.gradle.kts"
implementation(platform("androidx.compose:compose-bom:2026.09.00"))
implementation("androidx.compose.foundation:foundation")
implementation("androidx.compose.ui:ui")
```

2. Copy the theme files every view uses:

```kt title="kotlin/theme/Theme.kt"
package com.esuiss.ui.theme

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.dropShadow
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.graphics.shadow.Shadow as DropShadow
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.text.style.LineHeightStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.DpOffset
import androidx.compose.ui.unit.em
import androidx.compose.ui.unit.sp

internal fun textStyle(size: Double, lineHeight: Double, letterSpacing: Double) = TextStyle(
    fontSize = size.sp,
    lineHeight = lineHeight.sp,
    letterSpacing = letterSpacing.em,
    lineHeightStyle = LineHeightStyle(
        alignment = LineHeightStyle.Alignment.Center,
        trim = LineHeightStyle.Trim.None,
    ),
)

@Immutable
data class Shadow(
    val offsetX: Dp,
    val offsetY: Dp,
    val blur: Dp,
    val color: Color,
)

fun Modifier.shadow(shadow: Shadow, shape: Shape): Modifier = dropShadow(
    shape,
    DropShadow(
        radius = shadow.blur,
        color = shadow.color,
        offset = DpOffset(shadow.offsetX, shadow.offsetY),
    ),
)

val LocalColors = staticCompositionLocalOf { LightColors }

object EsuissTheme {
    val colors: Colors
        @Composable get() = LocalColors.current

    val typography: Typography
        get() = Typography

    val radius: Radius
        get() = Radius

    val shadows: Shadows
        get() = Shadows
}

@Composable
fun EsuissTheme(
    darkTheme: Boolean = isSystemInDarkTheme(),
    content: @Composable () -> Unit,
) {
    CompositionLocalProvider(
        LocalColors provides if (darkTheme) DarkColors else LightColors,
        content = content,
    )
}
```

```kt title="kotlin/theme/Tokens.kt"
package com.esuiss.ui.theme

import androidx.compose.runtime.Immutable
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.unit.dp

@Immutable
data class Colors(
    val surface: Color,
    val surfaceSecondary: Color,
    val surfaceTertiary: Color,
    val surfaceRaised: Color,
    val label: Color,
    val labelSecondary: Color,
    val labelTertiary: Color,
    val labelQuaternary: Color,
    val control: Color,
    val controlPressed: Color,
    val controlSelected: Color,
    val controlDisabled: Color,
    val onControlSelected: Color,
    val itemPressed: Color,
    val itemSelected: Color,
    val separator: Color,
    val separatorStrong: Color,
    val accent: Color,
    val accentPressed: Color,
    val accentSelected: Color,
    val accentDisabled: Color,
    val onAccent: Color,
    val accentSurface: Color,
    val accentSurfacePressed: Color,
    val link: Color,
    val focus: Color,
    val scrim: Color,
    val media: Color,
    val onMedia: Color,
    val danger: Color,
    val dangerSurface: Color,
    val dangerSurfacePressed: Color,
    val success: Color,
    val successSurface: Color,
    val warning: Color,
    val warningSurface: Color,
    val blue: Color,
    val green: Color,
    val orange: Color,
    val red: Color,
    val yellow: Color,
    val purple: Color,
    val pink: Color,
    val indigo: Color,
    val teal: Color,
    val mint: Color,
    val cyan: Color,
    val brown: Color,
    val gray: Color,
    val isDark: Boolean,
)

val LightColors = Colors(
    surface = Color(0xFFFFFFFF),
    surfaceSecondary = Color(0xFFF5F5F7),
    surfaceTertiary = Color(0xFFE8E8ED),
    surfaceRaised = Color(0xFFFFFFFF),
    label = Color(0xFF1D1D1F),
    labelSecondary = Color(0xFF6E6E73),
    labelTertiary = Color(0xFF86868B),
    labelQuaternary = Color(0xFFD2D2D7),
    control = Color(0xFF000000).copy(alpha = 0.04f),
    controlPressed = Color(0xFF000000).copy(alpha = 0.12f),
    controlSelected = Color(0xFF1D1D1F),
    controlDisabled = Color(0xFF000000).copy(alpha = 0.03f),
    onControlSelected = Color(0xFFFFFFFF),
    itemPressed = Color(0xFF000000).copy(alpha = 0.08f),
    itemSelected = Color(0xFF000000).copy(alpha = 0.06f),
    separator = Color(0xFFD2D2D7),
    separatorStrong = Color(0xFF86868B),
    accent = Color(0xFF0071E3),
    accentPressed = Color(0xFF005BB8),
    accentSelected = Color(0xFF0071E3),
    accentDisabled = Color(0xFF0071E3).copy(alpha = 0.4f),
    onAccent = Color(0xFFFFFFFF),
    accentSurface = Color(0xFF0071E3).copy(alpha = 0.09f),
    accentSurfacePressed = Color(0xFF0071E3).copy(alpha = 0.18f),
    link = Color(0xFF0066CC),
    focus = Color(0xFF0071E3),
    scrim = Color(0xFF000000).copy(alpha = 0.48f),
    media = Color(0xFF000000),
    onMedia = Color(0xFFFFFFFF),
    danger = Color(0xFFD0000A),
    dangerSurface = Color(0xFFD70015).copy(alpha = 0.08f),
    dangerSurfacePressed = Color(0xFFD70015).copy(alpha = 0.16f),
    success = Color(0xFF008009),
    successSurface = Color(0xFFEFFAF1),
    warning = Color(0xFFB64400),
    warningSurface = Color(0xFFFFF5EA),
    blue = Color(0xFF007AFF),
    green = Color(0xFF34C759),
    orange = Color(0xFFFF9500),
    red = Color(0xFFFF3B30),
    yellow = Color(0xFFFFCC00),
    purple = Color(0xFFAF52DE),
    pink = Color(0xFFFF2D55),
    indigo = Color(0xFF5856D6),
    teal = Color(0xFF30B0C7),
    mint = Color(0xFF00C7BE),
    cyan = Color(0xFF32ADE6),
    brown = Color(0xFFA2845E),
    gray = Color(0xFF8E8E93),
    isDark = false,
)

val DarkColors = Colors(
    surface = Color(0xFF000000),
    surfaceSecondary = Color(0xFF161617),
    surfaceTertiary = Color(0xFF2C2C2E),
    surfaceRaised = Color(0xFF1D1D1F),
    label = Color(0xFFF5F5F7),
    labelSecondary = Color(0xFFA1A1A6),
    labelTertiary = Color(0xFF86868B),
    labelQuaternary = Color(0xFF424245),
    control = Color(0xFFFFFFFF).copy(alpha = 0.1f),
    controlPressed = Color(0xFFFFFFFF).copy(alpha = 0.22f),
    controlSelected = Color(0xFFF5F5F7),
    controlDisabled = Color(0xFFFFFFFF).copy(alpha = 0.05f),
    onControlSelected = Color(0xFF000000),
    itemPressed = Color(0xFFFFFFFF).copy(alpha = 0.12f),
    itemSelected = Color(0xFFFFFFFF).copy(alpha = 0.1f),
    separator = Color(0xFF424245),
    separatorStrong = Color(0xFF6E6E73),
    accent = Color(0xFF0071E3),
    accentPressed = Color(0xFF004D9E),
    accentSelected = Color(0xFF0071E3),
    accentDisabled = Color(0xFF0071E3).copy(alpha = 0.4f),
    onAccent = Color(0xFFFFFFFF),
    accentSurface = Color(0xFF0071E3).copy(alpha = 0.18f),
    accentSurfacePressed = Color(0xFF0071E3).copy(alpha = 0.3f),
    link = Color(0xFF2997FF),
    focus = Color(0xFF0071E3),
    scrim = Color(0xFF000000).copy(alpha = 0.48f),
    media = Color(0xFF000000),
    onMedia = Color(0xFFFFFFFF),
    danger = Color(0xFFFF5447),
    dangerSurface = Color(0xFFFF453A).copy(alpha = 0.2f),
    dangerSurfacePressed = Color(0xFFFF453A).copy(alpha = 0.36f),
    success = Color(0xFF30D158),
    successSurface = Color(0xFF30D158).copy(alpha = 0.16f),
    warning = Color(0xFFFF9F0A),
    warningSurface = Color(0xFFFF9F0A).copy(alpha = 0.16f),
    blue = Color(0xFF0A84FF),
    green = Color(0xFF30D158),
    orange = Color(0xFFFF9F0A),
    red = Color(0xFFFF453A),
    yellow = Color(0xFFFFD60A),
    purple = Color(0xFFBF5AF2),
    pink = Color(0xFFFF375F),
    indigo = Color(0xFF5E5CE6),
    teal = Color(0xFF40C8E0),
    mint = Color(0xFF66D4CF),
    cyan = Color(0xFF64D2FF),
    brown = Color(0xFFAC8E68),
    gray = Color(0xFF8E8E93),
    isDark = true,
)

object Radius {
    val xs = 3.dp
    val sm = 5.dp
    val md = 8.dp
    val lg = 10.dp
    val xl = 12.dp
    val xl2 = 18.dp
    val xl3 = 28.dp
    val full = 9999.dp
}

object Typography {
    val xs3 = textStyle(11.0, 13.0, 0.006)
    val xs2 = textStyle(12.0, 16.0, 0.0)
    val xs = textStyle(13.0, 18.0, -0.006)
    val sm = textStyle(15.0, 20.0, -0.016)
    val md = textStyle(16.0, 21.0, -0.02)
    val base = textStyle(17.0, 22.0, -0.026)
    val lg = textStyle(20.0, 25.0, -0.023)
    val xl = textStyle(22.0, 28.0, -0.012)
    val xl2 = textStyle(28.0, 34.0, 0.014)
    val xl3 = textStyle(34.0, 41.0, 0.012)

    val all = listOf(xs3, xs2, xs, sm, md, base, lg, xl, xl2, xl3)
}

object Shadows {
    val md = Shadow(2.dp, 4.dp, 12.dp, Color.Black.copy(alpha = 0.08f))
    val lg = Shadow(0.dp, 4.dp, 24.dp, Color.Black.copy(alpha = 0.12f))
}
```

3. Copy the source and every file it uses:

```kt title="kotlin/components/Field.kt"
package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.ColumnScope
import androidx.compose.foundation.layout.LayoutScopeMarker
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.heightIn
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.shape.RoundedCornerShape
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.runtime.Immutable
import androidx.compose.runtime.remember
import androidx.compose.runtime.staticCompositionLocalOf
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.layout.layout
import androidx.compose.ui.platform.LocalConfiguration
import androidx.compose.ui.semantics.LiveRegionMode
import androidx.compose.ui.semantics.heading
import androidx.compose.ui.semantics.liveRegion
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Radius
import com.esuiss.ui.theme.Typography

enum class FieldOrientation { Vertical, Horizontal, Responsive }

enum class FieldGroupVariant { Default, Inset }

enum class FieldLegendVariant { Legend, Label }

@Immutable
internal class FieldState(val enabled: Boolean, val invalid: Boolean)

internal val LocalFieldState = staticCompositionLocalOf { FieldState(enabled = true, invalid = false) }

private val LocalFieldSetInset = staticCompositionLocalOf { false }

private val LocalFieldGroupVariant = staticCompositionLocalOf<FieldGroupVariant?> { null }

private val LocalFieldInset = staticCompositionLocalOf { false }

@LayoutScopeMarker
@Immutable
interface FieldScope {
    fun Modifier.weight(weight: Float): Modifier
}

private class RowFieldScope(private val scope: RowScope) : FieldScope {
    override fun Modifier.weight(weight: Float): Modifier = with(scope) { this@weight.weight(weight, true) }
}

private object ColumnFieldScope : FieldScope {
    override fun Modifier.weight(weight: Float): Modifier = this
}

@Composable
fun FieldSet(
    modifier: Modifier = Modifier,
    variant: FieldGroupVariant = FieldGroupVariant.Default,
    enabled: Boolean = true,
    content: @Composable ColumnScope.() -> Unit,
) {
    val inset = variant == FieldGroupVariant.Inset
    CompositionLocalProvider(
        LocalFieldSetInset provides inset,
        LocalFieldState provides FieldState(enabled, LocalFieldState.current.invalid),
    ) {
        Column(
            modifier = modifier.fillMaxWidth(),
            verticalArrangement = Arrangement.spacedBy(if (inset) 8.dp else 24.dp),
            content = content,
        )
    }
}

@Composable
fun FieldLegend(
    text: String,
    modifier: Modifier = Modifier,
    variant: FieldLegendVariant = FieldLegendVariant.Legend,
) {
    val colors = EsuissTheme.colors
    val inset = LocalFieldSetInset.current
    val enabled = LocalFieldState.current.enabled
    val style = if (inset) {
        Typography.xs.copy(color = if (enabled) colors.labelSecondary else colors.labelQuaternary)
    } else {
        Typography.base.copy(color = if (enabled) colors.label else colors.labelQuaternary, fontWeight = FontWeight.SemiBold)
    }
    BasicText(
        text = if (inset) text.uppercase() else text,
        modifier = modifier
            .then(if (variant == FieldLegendVariant.Legend) Modifier.semantics { heading() } else Modifier)
            .padding(start = if (inset) 16.dp else 0.dp, bottom = if (inset) 0.dp else 12.dp),
        style = style,
    )
}

@Composable
fun FieldGroup(
    modifier: Modifier = Modifier,
    variant: FieldGroupVariant = FieldGroupVariant.Default,
    content: @Composable () -> Unit,
) {
    val colors = EsuissTheme.colors
    CompositionLocalProvider(
        LocalFieldSetInset provides false,
        LocalFieldGroupVariant provides variant,
    ) {
        if (variant == FieldGroupVariant.Inset) {
            FormDividedStack(
                orientation = Orientation.Vertical,
                dividerColor = colors.separator,
                modifier = modifier
                    .fillMaxWidth()
                    .clip(RoundedCornerShape(Radius.xl2))
                    .background(colors.surfaceSecondary),
                dividerInsetStart = 16.dp,
                content = content,
            )
        } else {
            Column(
                modifier = modifier.fillMaxWidth(),
                verticalArrangement = Arrangement.spacedBy(28.dp),
            ) {
                content()
            }
        }
    }
}

@Composable
fun Field(
    modifier: Modifier = Modifier,
    orientation: FieldOrientation = FieldOrientation.Vertical,
    enabled: Boolean = LocalFieldState.current.enabled,
    invalid: Boolean = false,
    content: @Composable FieldScope.() -> Unit,
) {
    val inset = LocalFieldGroupVariant.current == FieldGroupVariant.Inset
    val horizontal = when (orientation) {
        FieldOrientation.Vertical -> false
        FieldOrientation.Horizontal -> true
        FieldOrientation.Responsive -> LocalConfiguration.current.screenWidthDp >= 768
    }
    val sizing = modifier
        .fillMaxWidth()
        .then(if (inset) Modifier.heightIn(min = 44.dp).padding(horizontal = 16.dp, vertical = 6.dp) else Modifier)
    CompositionLocalProvider(
        LocalFieldGroupVariant provides null,
        LocalFieldInset provides inset,
        LocalFieldState provides FieldState(enabled, invalid),
    ) {
        if (horizontal) {
            Row(
                modifier = sizing,
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                verticalAlignment = Alignment.CenterVertically,
            ) {
                val scope = remember(this) { RowFieldScope(this) }
                scope.content()
            }
        } else {
            Column(
                modifier = sizing,
                verticalArrangement = Arrangement.spacedBy(12.dp, Alignment.CenterVertically),
            ) {
                ColumnFieldScope.content()
            }
        }
    }
}

@Composable
fun FieldScope.FieldContent(
    modifier: Modifier = Modifier,
    content: @Composable ColumnScope.() -> Unit,
) {
    Column(
        modifier = modifier.weight(1f),
        verticalArrangement = Arrangement.spacedBy(4.dp),
        content = content,
    )
}

@Composable
fun FieldLabel(text: String, modifier: Modifier = Modifier) {
    val colors = EsuissTheme.colors
    val enabled = LocalFieldState.current.enabled
    BasicText(
        text = text,
        modifier = modifier,
        style = Typography.base.copy(
            color = if (enabled) colors.label else colors.labelQuaternary,
            fontWeight = if (LocalFieldInset.current) FontWeight.Normal else FontWeight.SemiBold,
        ),
    )
}

@Composable
fun FieldTitle(text: String, modifier: Modifier = Modifier) {
    val colors = EsuissTheme.colors
    val enabled = LocalFieldState.current.enabled
    BasicText(
        text = text,
        modifier = modifier,
        style = Typography.base.copy(
            color = if (enabled) colors.label else colors.labelQuaternary,
            fontWeight = FontWeight.SemiBold,
        ),
    )
}

@Composable
fun FieldDescription(text: String, modifier: Modifier = Modifier) {
    val colors = EsuissTheme.colors
    val inset = LocalFieldSetInset.current
    BasicText(
        text = text,
        modifier = modifier.padding(start = if (inset) 16.dp else 0.dp),
        style = (if (inset) Typography.xs else Typography.sm).copy(color = colors.labelSecondary),
    )
}

@Composable
fun FieldSeparator(
    modifier: Modifier = Modifier,
    text: String? = null,
) {
    val colors = EsuissTheme.colors
    Box(
        modifier = modifier
            .fillMaxWidth()
            .layout { measurable, constraints ->
                val placeable = measurable.measure(constraints)
                val overlap = 8.dp.roundToPx()
                val height = (placeable.height - overlap * 2).coerceAtLeast(0)
                layout(placeable.width, height) { placeable.place(0, -overlap) }
            }
            .heightIn(min = 20.dp),
        contentAlignment = Alignment.Center,
    ) {
        Separator()
        if (text != null) {
            BasicText(
                text = text,
                modifier = Modifier.background(colors.surface).padding(horizontal = 8.dp),
                style = Typography.sm.copy(color = colors.labelSecondary),
            )
        }
    }
}

@Composable
fun FieldError(text: String?, modifier: Modifier = Modifier) {
    if (text.isNullOrEmpty()) return
    BasicText(
        text = text,
        modifier = modifier.semantics { liveRegion = LiveRegionMode.Polite },
        style = Typography.sm.copy(color = EsuissTheme.colors.danger),
    )
}

@Composable
fun FieldError(errors: List<String?>, modifier: Modifier = Modifier) {
    val messages = errors.filterNotNull().filter { it.isNotEmpty() }.distinct()
    val text = when (messages.size) {
        0 -> null
        1 -> messages[0]
        else -> messages.joinToString("\n") { "• $it" }
    }
    FieldError(text, modifier)
}
```

```kt title="kotlin/components/Content.kt"
package com.esuiss.ui.components

import androidx.compose.runtime.compositionLocalOf
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.TextStyle
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp

val LocalContentStyle = compositionLocalOf { TextStyle.Default }

val LocalContentColor = compositionLocalOf { Color.Unspecified }

val LocalIconSize = compositionLocalOf { 20.dp }
```

```kt title="kotlin/components/FormSupport.kt"
package com.esuiss.ui.components

import android.provider.Settings
import androidx.compose.animation.core.CubicBezierEasing
import androidx.compose.foundation.background
import androidx.compose.foundation.border
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.text.selection.TextSelectionColors
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.draw.drawWithContent
import androidx.compose.ui.geometry.Offset
import androidx.compose.ui.geometry.Size
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.Shape
import androidx.compose.ui.layout.Layout
import androidx.compose.ui.layout.layout
import androidx.compose.ui.platform.LocalContext
import androidx.compose.ui.unit.Constraints
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.LayoutDirection
import androidx.compose.ui.unit.constrainHeight
import androidx.compose.ui.unit.constrainWidth
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.Colors
import com.esuiss.ui.theme.Shadow

internal val FormShadowXs = Shadow(0.dp, 1.dp, 2.dp, Color.Black.copy(alpha = 0.05f))

internal val FormShadowSm = Shadow(0.dp, 1.dp, 3.dp, Color.Black.copy(alpha = 0.1f))

internal val FormEasing = CubicBezierEasing(0.32f, 0.72f, 0f, 1f)

internal fun Modifier.formTouchTarget(): Modifier = layout { measurable, constraints ->
    val minimum = 48.dp.roundToPx()
    val placeable = measurable.measure(constraints)
    val width = constraints.constrainWidth(maxOf(placeable.width, minimum))
    val height = constraints.constrainHeight(maxOf(placeable.height, minimum))
    layout(width, height) {
        placeable.place((width - placeable.width) / 2, (height - placeable.height) / 2)
    }
}

@Composable
internal fun formReducedMotion(): Boolean {
    val context = LocalContext.current
    return remember(context) {
        Settings.Global.getFloat(context.contentResolver, Settings.Global.ANIMATOR_DURATION_SCALE, 1f) == 0f
    }
}

internal fun formSelectionColors(colors: Colors) = TextSelectionColors(
    handleColor = colors.accent,
    backgroundColor = colors.accent.copy(alpha = 0.3f),
)

internal fun Modifier.formInputSurface(
    colors: Colors,
    shape: Shape,
    focused: Boolean,
    invalid: Boolean,
    enabled: Boolean,
): Modifier {
    val background = when {
        !enabled -> colors.controlDisabled
        invalid -> colors.danger.copy(alpha = if (colors.isDark) 0.1f else 0.05f)
        else -> colors.control
    }
    val border = when {
        invalid -> colors.danger
        focused -> colors.focus
        else -> Color.Transparent
    }
    return clip(shape).background(background, shape).border(1.dp, border, shape)
}

@Composable
internal fun FormDividedStack(
    orientation: Orientation,
    dividerColor: Color,
    modifier: Modifier = Modifier,
    dividerInsetStart: Dp = 0.dp,
    content: @Composable () -> Unit,
) {
    val boundaries = remember { mutableStateOf(IntArray(0)) }
    val vertical = orientation == Orientation.Vertical
    Layout(
        content = content,
        modifier = modifier.drawWithContent {
            drawContent()
            val stroke = 1.dp.toPx()
            val inset = dividerInsetStart.toPx()
            boundaries.value.forEach { position ->
                if (vertical) {
                    val start = if (layoutDirection == LayoutDirection.Rtl) 0f else inset
                    drawRect(dividerColor, Offset(start, position.toFloat()), Size(size.width - inset, stroke))
                } else {
                    val x = if (layoutDirection == LayoutDirection.Rtl) size.width - position - stroke else position.toFloat()
                    drawRect(dividerColor, Offset(x, 0f), Size(stroke, size.height))
                }
            }
        },
    ) { measurables, constraints ->
        if (vertical) {
            val width = if (constraints.hasFixedWidth) {
                constraints.maxWidth
            } else {
                constraints.constrainWidth(measurables.maxOfOrNull { it.maxIntrinsicWidth(Constraints.Infinity) } ?: 0)
            }
            val placeables = measurables.map {
                it.measure(Constraints(minWidth = width, maxWidth = width))
            }
            val offsets = IntArray(placeables.size)
            var y = 0
            placeables.forEachIndexed { index, placeable ->
                offsets[index] = y
                y += placeable.height
            }
            val next = offsets.drop(1).toIntArray()
            if (!next.contentEquals(boundaries.value)) boundaries.value = next
            layout(width, constraints.constrainHeight(y)) {
                placeables.forEachIndexed { index, placeable -> placeable.placeRelative(0, offsets[index]) }
            }
        } else {
            val height = if (constraints.hasFixedHeight) {
                constraints.maxHeight
            } else {
                constraints.constrainHeight(measurables.maxOfOrNull { it.maxIntrinsicHeight(Constraints.Infinity) } ?: 0)
            }
            val placeables = measurables.map {
                it.measure(Constraints(minHeight = height, maxHeight = height))
            }
            val offsets = IntArray(placeables.size)
            var x = 0
            placeables.forEachIndexed { index, placeable ->
                offsets[index] = x
                x += placeable.width
            }
            val next = offsets.drop(1).toIntArray()
            if (!next.contentEquals(boundaries.value)) boundaries.value = next
            layout(constraints.constrainWidth(x), height) {
                placeables.forEachIndexed { index, placeable -> placeable.placeRelative(offsets[index], 0) }
            }
        }
    }
}
```

```kt title="kotlin/components/Label.kt"
package com.esuiss.ui.components

import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.RowScope
import androidx.compose.foundation.text.BasicText
import androidx.compose.runtime.Composable
import androidx.compose.runtime.CompositionLocalProvider
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography

@Composable
fun Label(
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
    content: @Composable RowScope.() -> Unit,
) {
    val colors = EsuissTheme.colors
    val color = if (enabled) colors.label else colors.labelQuaternary
    Row(
        modifier = modifier,
        horizontalArrangement = Arrangement.spacedBy(8.dp),
        verticalAlignment = Alignment.CenterVertically,
    ) {
        CompositionLocalProvider(
            LocalContentStyle provides Typography.base.copy(color = color, fontWeight = FontWeight.SemiBold),
            LocalContentColor provides color,
        ) {
            content()
        }
    }
}

@Composable
fun Label(
    text: String,
    modifier: Modifier = Modifier,
    enabled: Boolean = true,
) {
    Label(modifier, enabled) {
        BasicText(text, style = LocalContentStyle.current)
    }
}
```

```kt title="kotlin/components/Separator.kt"
package com.esuiss.ui.components

import androidx.compose.foundation.background
import androidx.compose.foundation.gestures.Orientation
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxHeight
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.width
import androidx.compose.runtime.Composable
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.esuiss.ui.theme.EsuissTheme

@Composable
fun Separator(
    modifier: Modifier = Modifier,
    orientation: Orientation = Orientation.Horizontal,
) {
    val sizing = if (orientation == Orientation.Horizontal) {
        Modifier.fillMaxWidth().height(1.dp)
    } else {
        Modifier.fillMaxHeight().width(1.dp)
    }
    Box(modifier.then(sizing).background(EsuissTheme.colors.separator))
}
```

4. Update the `com.esuiss.ui` package names to match your project.

## Usage

```tsx
import { FieldSet, FieldLegend, FieldGroup, Field, FieldContent, FieldLabel, FieldTitle, FieldDescription, FieldSeparator, FieldError } from "@/components/ui/field"
```

```tsx
<Field>
  <FieldLabel>Username</FieldLabel>
  <Input placeholder="evilrabbit" autoCapitalize="none" />
  <FieldDescription>
    Choose a unique username for your account.
  </FieldDescription>
</Field>
```

Put a `FieldLabel`, the control and a `FieldError` inside `Field`. The control is labelled by the label and uses the description and error text as its accessibility hint. Set `invalid` to force the error state, or let validation decide it.

`FieldError` shows its children, or the messages from `errors` (for example from a form library), and can be limited to one failure with `match`, such as `tooShort`. Use `orientation="horizontal"` for a label beside a switch or checkbox, with `FieldContent` holding a `FieldTitle` and `FieldDescription`.

`FieldSeparator` divides fields and can show short text such as "or" in the middle.

## Examples

### Invalid

A field in the invalid state with an error message.

![Preview](https://uim.suiss.app/previews/components-field--invalid.light.webp)

```tsx
import { Field, FieldDescription, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInvalidExample() {
  return (
    <Field invalid>
      <FieldLabel>Email</FieldLabel>
      <Input
        defaultValue="hello@"
        keyboardType="email-address"
        autoCapitalize="none"
      />
      <FieldDescription>
        We will send a confirmation link here.
      </FieldDescription>
      <FieldError>Enter a valid email address.</FieldError>
    </Field>
  )
}
```

```swift
import EsuissUI
import SwiftUI

struct FieldInvalidDemo: View {
  @State private var email = "hello@"

  var body: some View {
    Field(invalid: true) {
      FieldLabel("Email")
        .accessibilityHidden(true)
      TextField("Email", text: $email)
        .textFieldStyle(.input)
        .keyboardType(.emailAddress)
        .textInputAutocapitalization(.never)
        .accessibilityLabel(Text("Email"))
      FieldDescription("We will send a confirmation link here.")
      FieldError("Enter a valid email address.")
    }
  }
}
```

```kotlin
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.input.KeyboardType
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldError
import com.esuiss.ui.components.FieldLabel
import com.esuiss.ui.components.Input

val FieldEmailText = KeyboardOptions(
    capitalization = KeyboardCapitalization.None,
    autoCorrectEnabled = false,
    keyboardType = KeyboardType.Email,
)

@Composable
fun FieldInvalid() {
    var value by rememberSaveable { mutableStateOf("hello@") }
    Field(invalid = true) {
        FieldLabel("Email")
        Input(value, { value = it }, Modifier.semantics { contentDescription = "Email" }, keyboardOptions = FieldEmailText)
        FieldDescription("We will send a confirmation link here.")
        FieldError("Enter a valid email address.")
    }
}
```

### Validation

Required, custom and minimum-length validation on blur and on change.

![Preview](https://uim.suiss.app/previews/components-field--validation.light.webp)

```tsx
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Textarea } from "@/components/ui/textarea"

export function FieldValidationExample() {
  return (
    <FieldGroup>
      <Field validationMode="onBlur">
        <FieldLabel>Name</FieldLabel>
        <Input placeholder="Required" required />
        <FieldError />
      </Field>
      <Field
        validationMode="onChange"
        validate={(value) =>
          typeof value === "string" && value.includes("@")
            ? null
            : "Email must contain @."
        }
      >
        <FieldLabel>Email</FieldLabel>
        <Input
          placeholder="m@example.com"
          keyboardType="email-address"
          autoCapitalize="none"
        />
        <FieldDescription>Validated on every change.</FieldDescription>
        <FieldError />
      </Field>
      <Field validationMode="onBlur">
        <FieldLabel>Bio</FieldLabel>
        <Textarea placeholder="At least 20 characters" minLength={20} />
        <FieldError match="tooShort">Tell us a little more.</FieldError>
      </Field>
    </FieldGroup>
  )
}
```

```swift
import EsuissUI
import SwiftUI

enum FieldMessages {
  static let required = "This field is required."

  static func tooShort(_ minLength: Int) -> String {
    "Use at least \(minLength) characters."
  }
}

struct FieldValidationDemo: View {
  enum Focus: Hashable {
    case name, email, bio
  }

  @State private var name = ""
  @State private var email = ""
  @State private var bio = ""
  @State private var nameError: String?
  @State private var emailError: String?
  @State private var bioError: String?
  @State private var nameTouched = false
  @State private var bioTouched = false
  @FocusState private var focus: Focus?

  var body: some View {
    FieldGroup {
      Field(invalid: nameError != nil) {
        FieldLabel("Name")
          .accessibilityHidden(true)
        TextField("Required", text: $name)
          .textFieldStyle(.input)
          .focused($focus, equals: .name)
          .accessibilityLabel(Text("Name"))
        FieldError(errors: [nameError])
      }
      Field(invalid: emailError != nil) {
        FieldLabel("Email")
          .accessibilityHidden(true)
        TextField("m@example.com", text: $email)
          .textFieldStyle(.input)
          .keyboardType(.emailAddress)
          .textInputAutocapitalization(.never)
          .focused($focus, equals: .email)
          .accessibilityLabel(Text("Email"))
        FieldDescription("Validated on every change.")
        FieldError(errors: [emailError])
      }
      Field(invalid: bioError != nil) {
        FieldLabel("Bio")
          .accessibilityHidden(true)
        TextField("At least 20 characters", text: $bio, axis: .vertical)
          .textFieldStyle(.textarea)
          .focused($focus, equals: .bio)
          .accessibilityLabel(Text("Bio"))
        if bioError != nil {
          FieldError("Tell us a little more.")
        }
      }
    }
    .onChange(of: focus) { previous, _ in
      switch previous {
      case .name:
        nameTouched = true
        nameError = validateName()
      case .bio:
        bioTouched = true
        bioError = validateBio()
      default:
        break
      }
    }
    .onChange(of: name) {
      if nameTouched { nameError = validateName() }
    }
    .onChange(of: email) {
      emailError = email.contains("@") ? nil : "Email must contain @."
    }
    .onChange(of: bio) {
      if bioTouched { bioError = validateBio() }
    }
  }

  func validateName() -> String? {
    name.isEmpty ? FieldMessages.required : nil
  }

  func validateBio() -> String? {
    !bio.isEmpty && bio.count < 20 ? FieldMessages.tooShort(20) : nil
  }
}

let required = "This field is required."

func tooShort(_ minLength: Int) -> String {
  "Use at least \(minLength) characters."
}
```

```kotlin
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.focus.onFocusChanged
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.input.KeyboardType
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldError
import com.esuiss.ui.components.FieldGroup
import com.esuiss.ui.components.FieldLabel
import com.esuiss.ui.components.Input
import com.esuiss.ui.components.Textarea

val FieldEmailText = KeyboardOptions(
    capitalization = KeyboardCapitalization.None,
    autoCorrectEnabled = false,
    keyboardType = KeyboardType.Email,
)

class FieldFocus {
    var focused = false
}

@Composable
fun fieldOnBlur(onBlur: () -> Unit): Modifier {
    val focus = remember { FieldFocus() }
    val current by rememberUpdatedState(onBlur)
    return Modifier.onFocusChanged { state ->
        if (focus.focused && !state.isFocused) current()
        focus.focused = state.isFocused
    }
}

@Composable
fun FieldValidation() {
    var name by rememberSaveable { mutableStateOf("") }
    var nameError by rememberSaveable { mutableStateOf<String?>(null) }
    var email by rememberSaveable { mutableStateOf("") }
    var emailError by rememberSaveable { mutableStateOf<String?>(null) }
    var bio by rememberSaveable { mutableStateOf("") }
    var bioShort by rememberSaveable { mutableStateOf(false) }
    FieldGroup {
        Field(invalid = nameError != null) {
            FieldLabel("Name")
            Input(
                name,
                {
                    name = it
                    if (nameError != null && it.isNotEmpty()) nameError = null
                },
                Modifier
                    .semantics { contentDescription = "Name" }
                    .then(fieldOnBlur { nameError = if (name.isEmpty()) FieldRequiredMessage else null }),
                placeholder = "Required",
            )
            FieldError(nameError)
        }
        Field(invalid = emailError != null) {
            FieldLabel("Email")
            Input(
                email,
                {
                    email = it
                    emailError = if (it.contains("@")) null else "Email must contain @."
                },
                Modifier.semantics { contentDescription = "Email" },
                placeholder = "m@example.com",
                keyboardOptions = FieldEmailText,
            )
            FieldDescription("Validated on every change.")
            FieldError(emailError)
        }
        Field(invalid = bioShort) {
            FieldLabel("Bio")
            Textarea(
                bio,
                {
                    bio = it
                    if (bioShort && (it.isEmpty() || it.length >= 20)) bioShort = false
                },
                Modifier
                    .semantics { contentDescription = "Bio" }
                    .then(fieldOnBlur { bioShort = bio.isNotEmpty() && bio.length < 20 }),
                placeholder = "At least 20 characters",
            )
            FieldError(if (bioShort) "Tell us a little more." else null)
        }
    }
}
```

### Disabled

A disabled field.

![Preview](https://uim.suiss.app/previews/components-field--disabled.light.webp)

```tsx
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldDisabledExample() {
  return (
    <Field disabled>
      <FieldLabel>Workspace</FieldLabel>
      <Input defaultValue="acme" />
      <FieldDescription>Contact an admin to change this.</FieldDescription>
    </Field>
  )
}
```

```swift
import EsuissUI
import SwiftUI

struct FieldDisabledDemo: View {
  @State private var workspace = "acme"

  var body: some View {
    Field {
      FieldLabel("Workspace")
        .accessibilityHidden(true)
      TextField("Workspace", text: $workspace)
        .textFieldStyle(.input)
        .accessibilityLabel(Text("Workspace"))
      FieldDescription("Contact an admin to change this.")
    }
    .disabled(true)
  }
}
```

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldLabel
import com.esuiss.ui.components.Input

@Composable
fun FieldDisabled() {
    var value by rememberSaveable { mutableStateOf("acme") }
    Field(enabled = false) {
        FieldLabel("Workspace")
        Input(value, { value = it }, Modifier.semantics { contentDescription = "Workspace" })
        FieldDescription("Contact an admin to change this.")
    }
}
```

### Horizontal

Switch rows with a title and description beside the control.

![Preview](https://uim.suiss.app/previews/components-field--horizontal.light.webp)

```tsx
import { Field, FieldContent, FieldDescription, FieldGroup, FieldSeparator, FieldTitle } from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

export function FieldHorizontalExample() {
  return (
    <FieldGroup>
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Marketing emails</FieldTitle>
          <FieldDescription>
            Receive emails about new products.
          </FieldDescription>
        </FieldContent>
        <Switch />
      </Field>
      <FieldSeparator />
      <Field orientation="horizontal">
        <FieldContent>
          <FieldTitle>Security emails</FieldTitle>
          <FieldDescription>
            Receive emails about your account.
          </FieldDescription>
        </FieldContent>
        <Switch />
      </Field>
    </FieldGroup>
  )
}
```

```swift
import EsuissUI
import SwiftUI

struct FieldHorizontalDemo: View {
  @State private var marketing = false
  @State private var security = false

  var body: some View {
    FieldGroup {
      Field(orientation: .horizontal) {
        FieldContent {
          FieldTitle("Marketing emails")
          FieldDescription("Receive emails about new products.")
        }
        Toggle(isOn: $marketing) { EmptyView() }
          .toggleStyle(.switch(size: .default))
          .accessibilityLabel(Text("Marketing emails"))
      }
      FieldSeparator()
      Field(orientation: .horizontal) {
        FieldContent {
          FieldTitle("Security emails")
          FieldDescription("Receive emails about your account.")
        }
        Toggle(isOn: $security) { EmptyView() }
          .toggleStyle(.switch(size: .default))
          .accessibilityLabel(Text("Security emails"))
      }
    }
  }
}
```

```kotlin
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldContent
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldGroup
import com.esuiss.ui.components.FieldOrientation
import com.esuiss.ui.components.FieldSeparator
import com.esuiss.ui.components.FieldTitle
import com.esuiss.ui.components.Switch

@Composable
fun FieldHorizontal() {
    var marketing by rememberSaveable { mutableStateOf(false) }
    var security by rememberSaveable { mutableStateOf(false) }
    FieldGroup {
        Field(orientation = FieldOrientation.Horizontal) {
            FieldContent {
                FieldTitle("Marketing emails")
                FieldDescription("Receive emails about new products.")
            }
            Switch(marketing, { marketing = it }, Modifier.semantics { contentDescription = "Marketing emails" })
        }
        FieldSeparator()
        Field(orientation = FieldOrientation.Horizontal) {
            FieldContent {
                FieldTitle("Security emails")
                FieldDescription("Receive emails about your account.")
            }
            Switch(security, { security = it }, Modifier.semantics { contentDescription = "Security emails" })
        }
    }
}
```

### Checkbox group

A fieldset of checkboxes with a legend.

![Preview](https://uim.suiss.app/previews/components-field--checkbox-group.light.webp)

```tsx
import * as React from "react"
import { View } from "react-native"
import * as CheckboxGroupPrimitive from "@/components/primitives/checkbox-group"
import { Checkbox } from "@/components/ui/checkbox"
import { FieldDescription, FieldLegend, FieldSet } from "@/components/ui/field"
import { Text } from "@/components/ui/text"

const TOPPINGS = ["cheese", "olives", "peppers"]

function ToppingsDemo() {
  const [value, setValue] = React.useState<string[]>(["cheese"])
  return (
    <FieldSet>
      <FieldLegend>Toppings</FieldLegend>
      <FieldDescription>Choose what goes on your pizza.</FieldDescription>
      <CheckboxGroupPrimitive.Root
        value={value}
        onValueChange={setValue}
        allValues={TOPPINGS}
        className="gap-3"
      >
        <View className="flex-row items-center gap-3">
          <Checkbox parent />
          <Text>All toppings</Text>
        </View>
        {TOPPINGS.map((topping) => (
          <View key={topping} className="flex-row items-center gap-3 ps-6">
            <Checkbox value={topping} />
            <Text className="capitalize">{topping}</Text>
          </View>
        ))}
      </CheckboxGroupPrimitive.Root>
    </FieldSet>
  )
}

export function FieldCheckboxGroupExample() {
  return (
    <ToppingsDemo />
  )
}
```

```swift
import EsuissUI
import SwiftUI

struct FieldToppingsDemo: View {
  private static let toppings = ["cheese", "olives", "peppers"]

  @State private var selected: Set<String> = ["cheese"]

  var body: some View {
    FieldSet {
      FieldLegend("Toppings")
      FieldDescription("Choose what goes on your pizza.")
      VStack(alignment: .leading, spacing: 12) {
        Toggle(sources: Self.toppings.map(binding), isOn: \.self) {
          Text("All toppings")
            .textStyle(.base)
            .foregroundStyle(Color.label)
        }
        .toggleStyle(.checkbox)
        ForEach(Self.toppings, id: \.self) { topping in
          Toggle(isOn: binding(topping)) {
            Text(verbatim: topping.capitalized)
              .textStyle(.base)
              .foregroundStyle(Color.label)
          }
          .toggleStyle(.checkbox)
          .padding(.leading, 24)
        }
      }
    }
  }

  func binding(_ topping: String) -> Binding<Bool> {
    Binding(
      get: { selected.contains(topping) },
      set: { isOn in
        if isOn { selected.insert(topping) } else { selected.remove(topping) }
      }
    )
  }
}

let toppings = ["cheese", "olives", "peppers"]
```

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.padding
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.state.ToggleableState
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Checkbox
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldLegend
import com.esuiss.ui.components.FieldSet
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TriStateCheckbox

val FieldToppings = listOf("cheese", "olives", "peppers")

@Composable
fun FieldCheckboxGroup() {
    var value by rememberSaveable { mutableStateOf(listOf("cheese")) }
    val parent = when (value.size) {
        0 -> ToggleableState.Off
        FieldToppings.size -> ToggleableState.On
        else -> ToggleableState.Indeterminate
    }
    FieldSet {
        FieldLegend("Toppings")
        FieldDescription("Choose what goes on your pizza.")
        Column(verticalArrangement = Arrangement.spacedBy(12.dp)) {
            Row(horizontalArrangement = Arrangement.spacedBy(12.dp), verticalAlignment = Alignment.CenterVertically) {
                TriStateCheckbox(
                    parent,
                    { value = if (parent == ToggleableState.On) emptyList() else FieldToppings },
                    Modifier.semantics { contentDescription = "All toppings" },
                )
                Text("All toppings")
            }
            FieldToppings.forEach { topping ->
                val label = topping.replaceFirstChar { it.uppercaseChar() }
                Row(
                    modifier = Modifier.padding(start = 24.dp),
                    horizontalArrangement = Arrangement.spacedBy(12.dp),
                    verticalAlignment = Alignment.CenterVertically,
                ) {
                    Checkbox(
                        topping in value,
                        { checked -> value = if (checked) FieldToppings.filter { it in value || it == topping } else value - topping },
                        Modifier.semantics { contentDescription = label },
                    )
                    Text(label)
                }
            }
        }
    }
}
```

### Inset

An `inset` group of rows on a rounded surface.

![Preview](https://uim.suiss.app/previews/components-field--inset.light.webp)

```tsx
import { Field, FieldGroup, FieldLabel, FieldLegend, FieldSet } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

export function FieldInsetExample() {
  return (
    <FieldSet>
      <FieldLegend>Profile</FieldLegend>
      <FieldGroup variant="inset">
        <Field orientation="horizontal">
          <FieldLabel className="flex-1 font-normal">Name</FieldLabel>
          <Input
            className="h-8 flex-1 bg-transparent px-0 text-right"
            defaultValue="Ada Lovelace"
          />
        </Field>
        <Field orientation="horizontal">
          <FieldLabel className="flex-1 font-normal">City</FieldLabel>
          <Input
            className="h-8 flex-1 bg-transparent px-0 text-right"
            defaultValue="London"
          />
        </Field>
      </FieldGroup>
    </FieldSet>
  )
}
```

```swift
import EsuissUI
import SwiftUI

struct FieldInsetDemo: View {
  @State private var name = "Ada Lovelace"
  @State private var city = "London"

  var body: some View {
    FieldSet {
      FieldLegend("Profile")
      FieldGroup(.inset) {
        FieldInsetRow(title: "Name", text: $name)
        FieldInsetRow(title: "City", text: $city)
      }
    }
  }
}

struct FieldInsetRow: View {
  let title: LocalizedStringKey
  @Binding var text: String

  var body: some View {
    Field(orientation: .horizontal) {
      FieldLabel(title)
        .frame(maxWidth: .infinity, alignment: .leading)
        .accessibilityHidden(true)
      TextField(title, text: $text)
        .textFieldStyle(.plain)
        .multilineTextAlignment(.trailing)
        .textStyle(.base)
        .foregroundStyle(Color.label)
        .frame(maxWidth: .infinity, minHeight: 32)
        .accessibilityLabel(Text(title))
    }
  }
}
```

```kotlin
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.text.BasicTextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.SolidColor
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldGroup
import com.esuiss.ui.components.FieldGroupVariant
import com.esuiss.ui.components.FieldLabel
import com.esuiss.ui.components.FieldLegend
import com.esuiss.ui.components.FieldOrientation
import com.esuiss.ui.components.FieldSet
import com.esuiss.ui.theme.EsuissTheme
import com.esuiss.ui.theme.Typography

@Composable
fun FieldInsetInput(value: String, onValueChange: (String) -> Unit, label: String, modifier: Modifier) {
    val colors = EsuissTheme.colors
    BasicTextField(
        value = value,
        onValueChange = onValueChange,
        modifier = modifier
            .height(32.dp)
            .semantics { contentDescription = label },
        textStyle = Typography.base.copy(color = colors.label, textAlign = TextAlign.End),
        singleLine = true,
        cursorBrush = SolidColor(colors.accent),
        decorationBox = { inner ->
            Row(verticalAlignment = Alignment.CenterVertically) { inner() }
        },
    )
}

@Composable
fun FieldInset() {
    var name by rememberSaveable { mutableStateOf("Ada Lovelace") }
    var city by rememberSaveable { mutableStateOf("London") }
    FieldSet {
        FieldLegend("Profile")
        FieldGroup(variant = FieldGroupVariant.Inset) {
            Field(orientation = FieldOrientation.Horizontal) {
                FieldLabel("Name", Modifier.weight(1f))
                FieldInsetInput(name, { name = it }, "Name", Modifier.weight(1f))
            }
            Field(orientation = FieldOrientation.Horizontal) {
                FieldLabel("City", Modifier.weight(1f))
                FieldInsetInput(city, { city = it }, "City", Modifier.weight(1f))
            }
        }
    }
}
```

### Form

A complete form with validation and a submit button.

![Preview](https://uim.suiss.app/previews/components-field--form.light.webp)

```tsx
import * as React from "react"
import * as FormPrimitive from "@/components/primitives/form"
import { Button } from "@/components/ui/button"
import { Field, FieldDescription, FieldError, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"
import { Text } from "@/components/ui/text"

function FormDemo() {
  const actionsRef = React.useRef<FormPrimitive.Actions | null>(null)
  const [errors, setErrors] = React.useState<FormPrimitive.Errors>({})
  const [submitted, setSubmitted] = React.useState<string | null>(null)

  return (
    <FormPrimitive.Root
      actionsRef={actionsRef}
      errors={errors}
      onFormSubmit={(values) => {
        if (values.username === "admin") {
          setErrors({ username: "This username is taken." })
          return
        }
        setSubmitted(JSON.stringify(values))
      }}
      className="gap-6"
    >
      <FieldGroup>
        <Field name="username">
          <FieldLabel>Username</FieldLabel>
          <Input placeholder="Try admin" autoCapitalize="none" required />
          <FieldDescription>Letters and numbers only.</FieldDescription>
          <FieldError />
        </Field>
        <Field
          name="password"
          validate={(value) =>
            typeof value === "string" && /\d/.test(value)
              ? null
              : "Include at least one number."
          }
        >
          <FieldLabel>Password</FieldLabel>
          <Input secureTextEntry required minLength={8} />
          <FieldError />
        </Field>
      </FieldGroup>
      <Button onPress={() => actionsRef.current?.submit()}>
        <Text>Create account</Text>
      </Button>
      {submitted ? <Text variant="muted">Submitted: {submitted}</Text> : null}
    </FormPrimitive.Root>
  )
}

export function FieldFormExample() {
  return (
    <FormDemo />
  )
}
```

```swift
import EsuissUI
import SwiftUI

enum FieldMessages {
  static let required = "This field is required."

  static func tooShort(_ minLength: Int) -> String {
    "Use at least \(minLength) characters."
  }
}

struct FieldFormDemo: View {
  @State private var username = ""
  @State private var password = ""
  @State private var usernameErrors: [String] = []
  @State private var passwordErrors: [String] = []
  @State private var taken = false
  @State private var submitted: String?

  var body: some View {
    VStack(alignment: .leading, spacing: 24) {
      FieldGroup {
        Field(invalid: !usernameErrors.isEmpty || taken) {
          FieldLabel("Username")
            .accessibilityHidden(true)
          TextField("Try admin", text: $username)
            .textFieldStyle(.input)
            .textInputAutocapitalization(.never)
            .autocorrectionDisabled()
            .accessibilityLabel(Text("Username"))
          FieldDescription("Letters and numbers only.")
          FieldError(errors: usernameErrors + (taken ? ["This username is taken."] : []))
        }
        Field(invalid: !passwordErrors.isEmpty) {
          FieldLabel("Password")
            .accessibilityHidden(true)
          SecureField("Password", text: $password)
            .textFieldStyle(.input)
            .accessibilityLabel(Text("Password"))
          FieldError(errors: passwordErrors)
        }
      }
      Button {
        submit()
      } label: {
        Text("Create account").frame(maxWidth: .infinity)
      }
      .buttonStyle(.variant())
      if let submitted {
        Text(verbatim: "Submitted: \(submitted)")
          .textVariant(.muted)
      }
    }
    .onChange(of: username) { taken = false }
  }

  func submit() {
    usernameErrors = username.isEmpty ? [FieldMessages.required] : []
    var errors: [String] = []
    if password.isEmpty {
      errors.append(FieldMessages.required)
    } else if password.count < 8 {
      errors.append(FieldMessages.tooShort(8))
    }
    if !password.contains(where: \.isNumber) {
      errors.append("Include at least one number.")
    }
    passwordErrors = errors
    guard usernameErrors.isEmpty, passwordErrors.isEmpty else { return }
    if username == "admin" {
      taken = true
      return
    }
    submitted = "{\"username\":\"\(username)\",\"password\":\"\(password)\"}"
  }
}

let required = "This field is required."

func tooShort(_ minLength: Int) -> String {
  "Use at least \(minLength) characters."
}
```

```kotlin
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.text.KeyboardOptions
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.text.input.KeyboardCapitalization
import androidx.compose.ui.text.input.KeyboardType
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.unit.dp
import com.esuiss.ui.components.Button
import com.esuiss.ui.components.Field
import com.esuiss.ui.components.FieldDescription
import com.esuiss.ui.components.FieldError
import com.esuiss.ui.components.FieldGroup
import com.esuiss.ui.components.FieldLabel
import com.esuiss.ui.components.Input
import com.esuiss.ui.components.Text
import com.esuiss.ui.components.TextVariant

val FieldPlainText = KeyboardOptions(capitalization = KeyboardCapitalization.None, autoCorrectEnabled = false)

fun fieldUsernameErrors(username: String, taken: Boolean): List<String> = buildList {
    if (username.isEmpty()) add(FieldRequiredMessage)
    if (taken) add("This username is taken.")
}

fun fieldPasswordErrors(password: String): List<String> = buildList {
    if (password.isEmpty()) add(FieldRequiredMessage)
    if (password.isNotEmpty() && password.length < 8) add("Use at least 8 characters.")
    if (!password.any { it.isDigit() }) add("Include at least one number.")
}

@Composable
fun FieldForm() {
    var username by rememberSaveable { mutableStateOf("") }
    var password by rememberSaveable { mutableStateOf("") }
    var taken by rememberSaveable { mutableStateOf(false) }
    var attempted by rememberSaveable { mutableStateOf(false) }
    var submitted by rememberSaveable { mutableStateOf<String?>(null) }
    val usernameErrors = if (attempted) fieldUsernameErrors(username, taken) else emptyList()
    val passwordErrors = if (attempted) fieldPasswordErrors(password) else emptyList()
    Column(Modifier.fillMaxWidth(), verticalArrangement = Arrangement.spacedBy(24.dp)) {
        FieldGroup {
            Field(invalid = usernameErrors.isNotEmpty()) {
                FieldLabel("Username")
                Input(
                    username,
                    {
                        username = it
                        taken = false
                    },
                    Modifier.semantics { contentDescription = "Username" },
                    placeholder = "Try admin",
                    keyboardOptions = FieldPlainText,
                )
                FieldDescription("Letters and numbers only.")
                FieldError(usernameErrors)
            }
            Field(invalid = passwordErrors.isNotEmpty()) {
                FieldLabel("Password")
                Input(
                    password,
                    { password = it },
                    Modifier.semantics { contentDescription = "Password" },
                    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Password),
                    visualTransformation = PasswordVisualTransformation(),
                )
                FieldError(passwordErrors)
            }
        }
        Button(
            "Create account",
            onClick = {
                attempted = true
                val invalid = fieldUsernameErrors(username, false).isNotEmpty() || fieldPasswordErrors(password).isNotEmpty()
                if (invalid) return@Button
                if (username == "admin") {
                    taken = true
                    return@Button
                }
                submitted = "{\"username\":\"$username\",\"password\":\"$password\"}"
            },
            modifier = Modifier.fillMaxWidth(),
        )
        submitted?.let { Text("Submitted: $it", variant = TextVariant.Muted) }
    }
}
```

## API Reference

### FieldSet

Group of related fields.

### FieldLegend

Heading for a fieldset.

### FieldGroup

Stack of fields, plain or inset.

### Field

One field that shares state with its control.

### FieldContent

Column for a title and description beside a control.

### FieldLabel

Label linked to the control.

### FieldTitle

Bold text for a field's title.

### FieldDescription

Helper text.

### FieldSeparator

Divider with optional centered text.

### FieldError

Error message shown when validation fails.

## Accessibility

- The control is labelled by `FieldLabel` and gets the description and error text as its accessibility hint.
- `FieldError` has the `alert` role, so screen readers announce it when it appears.
- `FieldSet` has the `group` role labelled by its legend; the legend has the `header` role.
- Disabled state is passed to the label and control.

## Notes

- Uses `text-label`, `text-label-secondary`, `text-danger` and `bg-surface-secondary` tokens; light and dark follow the system appearance.
- Inset separators use start and end offsets, so they flip in right-to-left layouts.