Field

import {  Field,  FieldControl,  FieldDescription,  FieldError,  FieldLabel,} from "moduix";export function FieldDemo() {  return (    <Field validationMode="onBlur">      <FieldLabel>Name</FieldLabel>      <FieldControl required placeholder="Enter your name" />      <FieldError match="valueMissing">Please enter your name.</FieldError>      <FieldDescription>Visible on your public profile.</FieldDescription>    </Field>  );}

import {  Field,  FieldControl,  FieldError,  FieldLabel,  FieldValidity,} from "moduix";export function CustomValidationFieldDemo() {  return (    <Field      validationMode="onChange"      validate={(value) => {        if (typeof value !== "string" || value.length < 3) {          return "Username must be at least 3 characters.";        }        return null;      }}    >      <FieldLabel>Username</FieldLabel>      <FieldControl placeholder="e.g. Vinny" />      <FieldError match="customError" />      <FieldValidity>        {(state) => (          <p className={styles.helper}>            {state.validity.valid ? "Looks good." : "Waiting for valid value."}          </p>        )}      </FieldValidity>    </Field>  );}

.helper {  margin: 0;  color: var(--color-muted-foreground);  font-size: var(--text-sm);  line-height: var(--line-height-text-sm);}

import {  Field,  FieldControl,  FieldDescription,  FieldLabel,} from "moduix";export function DisabledFieldDemo() {  return (    <Field disabled>      <FieldLabel>Organization</FieldLabel>      <FieldControl placeholder="Acme Inc." />      <FieldDescription>        This field is currently managed by your workspace.      </FieldDescription>    </Field>  );}

import {  Field,  Checkbox,  CheckboxIndicator,  FieldDescription,  FieldError,  FieldLabel,} from "moduix";export function CheckboxFieldDemo() {  return (    <Field validationMode="onBlur">      <FieldLabel>        <Checkbox required name="terms">          <CheckboxIndicator />        </Checkbox>        I agree to the terms      </FieldLabel>      <FieldError match="valueMissing">Please accept the terms.</FieldError>      <FieldDescription>Required to continue.</FieldDescription>    </Field>  );}

import {  Field,  FieldError,  FieldItem,  FieldLabel,  Radio,  RadioField,  RadioGroup,  RadioLabel,} from "moduix";export function RadioFieldDemo() {  return (    <Field name="account-type" validationMode="onBlur">      <FieldLabel>Account type</FieldLabel>      <RadioGroup>        <FieldItem>          <RadioField>            <Radio value="personal" required />            <RadioLabel>Personal account</RadioLabel>          </RadioField>        </FieldItem>        <FieldItem>          <RadioField>            <Radio value="team" />            <RadioLabel>Team account</RadioLabel>          </RadioField>        </FieldItem>      </RadioGroup>      <FieldError match="valueMissing">        Please choose an account type.      </FieldError>    </Field>  );}

import {  Field,  FieldDescription,  FieldLabel,  Switch,  SwitchLabel,} from "moduix";export function SwitchFieldDemo() {  return (    <Field name="newsletter">      <FieldLabel>        <Switch />        <SwitchLabel>Subscribe to newsletter</SwitchLabel>      </FieldLabel>      <FieldDescription>We send updates once per week.</FieldDescription>    </Field>  );}

import { Field, FieldLabel, Input, FieldError } from "moduix";export function InputFieldDemo() {  return (    <Field validationMode="onBlur">      <FieldLabel>Email</FieldLabel>      <Input required type="email" placeholder="name@example.com" />      <FieldError match="valueMissing">Please enter your email.</FieldError>      <FieldError match="typeMismatch">Enter a valid email address.</FieldError>    </Field>  );}

import {  Field,  FieldError,  NumberField,  NumberFieldDecrement,  NumberFieldGroup,  NumberFieldInput,  NumberFieldIncrement,  FieldLabel,} from "moduix";import { useId } from "react";export function NumberFieldDemo() {  const id = useId();  return (    <Field name="quantity" validationMode="onBlur">      <FieldLabel htmlFor={id}>Items</FieldLabel>      <NumberField id={id} min={1} max={10} required>        <NumberFieldGroup>          <NumberFieldDecrement aria-label="Decrease value" />          <NumberFieldInput />          <NumberFieldIncrement aria-label="Increase value" />        </NumberFieldGroup>      </NumberField>      <FieldError match="valueMissing">Please provide a number.</FieldError>      <FieldError match="rangeUnderflow">Value should be at least 1.</FieldError>      <FieldError match="rangeOverflow">Value should be at most 10.</FieldError>    </Field>  );}

import {  Field,  FieldControl,  FieldDescription,  FieldError,  FieldLabel,} from "moduix";export function CustomStylesFieldDemo() {  return (    <Field validationMode="onBlur" className={styles.customField}>      <FieldLabel className={styles.customLabel}>Project key</FieldLabel>      <FieldControl        required        placeholder="MAPS"        className={styles.customControl}      />      <FieldDescription className={styles.customDescription}>        Use three to five uppercase letters.      </FieldDescription>      <FieldError className={styles.customError} match="valueMissing">        Please enter a project key.      </FieldError>    </Field>  );}

.customField {  width: min(22rem, 100%);  max-width: 20rem;  gap: var(--spacing-2);}.customLabel,.customError {  color: var(--color-primary);}.customControl {  border-color: color-mix(in srgb, var(--color-primary) 40%, transparent);}.customControl:focus {  outline-color: var(--color-primary);}.customDescription {  color: var(--color-muted-foreground);}