HorizontalFields() — ui Function Reference

Architecture documentation for the HorizontalFields() function in field-example.tsx from the ui codebase.

Function tsx ComponentRegistry UIPrimitives

Entity Profile

ComponentRegistry→ UIPrimitives→ HorizontalFields() — ui Function Reference

Dependency Diagram

graph TD
  9fd7c61c_468c_f349_ca81_34f22121e042["HorizontalFields()"]
  88052f7e_baae_5fcd_95fe_0a964a30baa3["field-example.tsx"]
  9fd7c61c_468c_f349_ca81_34f22121e042 -->|defined in| 88052f7e_baae_5fcd_95fe_0a964a30baa3
  style 9fd7c61c_468c_f349_ca81_34f22121e042 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/base/examples/field-example.tsx lines 978–1061

function HorizontalFields() {
  const basicItems = [
    { label: "Select a fruit", value: null },
    { label: "Apple", value: "apple" },
    { label: "Banana", value: "banana" },
    { label: "Orange", value: "orange" },
  ]

  return (
    <Example title="Horizontal Fields">
      <FieldGroup className="**:data-[slot=field-content]:min-w-48">
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="horizontal-input">Username</FieldLabel>
            <FieldDescription>Enter your preferred username.</FieldDescription>
          </FieldContent>
          <Input id="horizontal-input" placeholder="johndoe" />
        </Field>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="horizontal-textarea">Bio</FieldLabel>
            <FieldDescription>
              Write a short description about yourself.
            </FieldDescription>
          </FieldContent>
          <Textarea
            id="horizontal-textarea"
            placeholder="Tell us about yourself..."
          />
        </Field>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="horizontal-switch">
              Email Notifications
            </FieldLabel>
            <FieldDescription>
              Receive email updates about your account.
            </FieldDescription>
          </FieldContent>
          <Switch id="horizontal-switch" />
        </Field>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="horizontal-select">Favorite Fruit</FieldLabel>
            <FieldDescription>Choose your favorite fruit.</FieldDescription>
          </FieldContent>
          <Select items={basicItems}>
            <SelectTrigger id="horizontal-select">
              <SelectValue />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                {basicItems.map((item) => (
                  <SelectItem key={item.value} value={item.value}>
                    {item.label}
                  </SelectItem>
                ))}
              </SelectGroup>
            </SelectContent>
          </Select>
        </Field>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="horizontal-native-select">Country</FieldLabel>
            <FieldDescription>Select your country.</FieldDescription>
          </FieldContent>
          <NativeSelect id="horizontal-native-select">
            <NativeSelectOption value="">Select a country</NativeSelectOption>
            <NativeSelectOption value="us">United States</NativeSelectOption>
            <NativeSelectOption value="uk">United Kingdom</NativeSelectOption>
            <NativeSelectOption value="ca">Canada</NativeSelectOption>
          </NativeSelect>
        </Field>
        <Field orientation="horizontal">
          <FieldContent>
            <FieldLabel htmlFor="horizontal-slider">Volume</FieldLabel>
            <FieldDescription>Adjust the volume level.</FieldDescription>
          </FieldContent>
          <Slider id="horizontal-slider" defaultValue={[50]} max={100} />
        </Field>
      </FieldGroup>