Inputs and forms

<FormField label="Project name" hint="A short descriptive name">
  <TextInput
    value={projectName}
    onValueChange={setProjectName}
    placeholder="Project name"
  />
</FormField>

<FormField label="Description">
  <Textarea
    aria-label="Quick message"
    placeholder="Message"
    rows={3}
  />
</FormField>

<SearchInput
  value={searchText}
  onInput={(event) => setSearchText(event.currentTarget.value)}
  placeholder="Search"
  aria-label="Search catalog"
/>

<FormField label="Quantity">
  <NumberInput
    aria-label="Quantity"
    value={quantity}
    onValueChange={(value) => setQuantity(value ?? 0)}
  />
</FormField>

<NumberStepper
  label="Priority"
  value={priority}
  min={0}
  max={100}
  onChange={setPriority}
  decreaseLabel="Decrease priority"
  increaseLabel="Increase priority"
/>

<FormSection
  title="Details"
  description="Labels and hints remain associated with their inputs."
>
  <FormField label="Read only">
    <TextInput
      aria-label="Read only example"
      value="Read only"
      readOnly
    />
  </FormField>
  <FormField label="Invalid input">
    <TextInput
      aria-label="Invalid example"
      aria-invalid="true"
      aria-describedby="example-error"
    />
    <FieldError id="example-error">Enter a project name.</FieldError>
  </FormField>
</FormSection>

<HighlightedTextInput
  value={code}
  aria-label="Highlighted example"
  highlight={code}
  onInput={(event) => setCode(event.currentTarget.value)}
/>

<InlineFieldGroup label="Dimensions">
  <Dropdown
    className="rv-select"
    source={[
      { value: 'Fixed', label: 'Fixed' },
      { value: 'Auto', label: 'Auto' },
    ]}
    config={{ ariaLabel: 'Sizing mode' }}
    value={mode}
    onChange={(value) => setMode(String(value))}
  />
  <NumberInput
    aria-label="Width"
    min={1}
    value={amount}
    onValueChange={(value) => setAmount(value ?? 1)}
  />
  <Dropdown
    className="rv-select"
    source={[
      { value: 'Pixels', label: 'Pixels' },
      { value: 'Percent', label: 'Percent' },
    ]}
    config={{ ariaLabel: 'Size unit' }}
    value={unit}
    onChange={(value) => setUnit(String(value))}
  />
</InlineFieldGroup>