HorizontalFields() — ui Function Reference

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

Function tsx ComponentRegistry ChartRegistry

Entity Profile

ComponentRegistry→ ChartRegistry→ HorizontalFields() — ui Function Reference

Dependency Diagram

graph TD
  2fa52e8b_25bd_5c29_a92f_ef12722c109c["HorizontalFields()"]
  0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f["field-example.tsx"]
  2fa52e8b_25bd_5c29_a92f_ef12722c109c -->|defined in| 0c6bcf2e_fcfc_3202_c84d_ba133cbc5e3f
  style 2fa52e8b_25bd_5c29_a92f_ef12722c109c fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/registry/bases/radix/examples/field-example.tsx lines 937–1011

function HorizontalFields() {
  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>
            <SelectTrigger id="horizontal-select">
              <SelectValue placeholder="Select a fruit" />
            </SelectTrigger>
            <SelectContent>
              <SelectGroup>
                <SelectItem value="apple">Apple</SelectItem>
                <SelectItem value="banana">Banana</SelectItem>
                <SelectItem value="orange">Orange</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>
    </Example>
  )
}