FeedbackForm() — ui Function Reference

Architecture documentation for the FeedbackForm() function in field-demo.tsx from the ui codebase.

Function tsx DocumentationAtlas SearchAPI

Entity Profile

DocumentationAtlas→ SearchAPI→ FeedbackForm() — ui Function Reference

Dependency Diagram

graph TD
  03a4ab71_1793_eb16_3086_849059f48bfa["FeedbackForm()"]
  b9b36d9d_9701_6134_d4ee_41213e7f1788["field-demo.tsx"]
  03a4ab71_1793_eb16_3086_849059f48bfa -->|defined in| b9b36d9d_9701_6134_d4ee_41213e7f1788
  style 03a4ab71_1793_eb16_3086_849059f48bfa fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

apps/v4/app/(internal)/sink/components/field-demo.tsx lines 1515–1639

function FeedbackForm() {
  const [rating, setRating] = useState([5])

  return (
    <Card>
      <CardHeader>
        <CardTitle>Feedback Form</CardTitle>
        <CardDescription>
          Help us improve by sharing your experience
        </CardDescription>
      </CardHeader>
      <CardContent>
        <form>
          <FieldGroup>
            <Field>
              <FieldLabel htmlFor="feedback-8m4-name-wql">
                Name (Optional)
              </FieldLabel>
              <Input id="feedback-8m4-name-wql" placeholder="Your name" />
              <FieldDescription>Your name is optional.</FieldDescription>
            </Field>
            <Field>
              <FieldLabel htmlFor="feedback-8m4-email-kkm">
                Email (Optional)
              </FieldLabel>
              <Input
                id="feedback-8m4-email-kkm"
                type="email"
                placeholder="your@email.com"
              />
            </Field>
            <Field>
              <FieldLabel htmlFor="feedback-8m4-rating-gw9">
                How would you rate your experience?
              </FieldLabel>
              <Slider
                value={rating}
                onValueChange={setRating}
                max={10}
                min={1}
                step={1}
                id="feedback-8m4-rating-gw9"
              />
              <FieldDescription>
                Poor (1) /{" "}
                <span className="font-medium">Rating: {rating[0]}</span> /
                Excellent (10)
              </FieldDescription>
            </Field>
            <Field>
              <FieldLabel>What type of feedback is this?</FieldLabel>
              <RadioGroup defaultValue="general">
                <Field orientation="horizontal">
                  <RadioGroupItem value="bug" id="feedback-8m4-bug" />
                  <FieldLabel
                    htmlFor="feedback-8m4-bug"
                    className="font-normal"
                  >
                    Bug Report
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <RadioGroupItem
                    value="feature"
                    id="feedback-8m4-feature-c2h"
                  />
                  <FieldLabel
                    htmlFor="feedback-8m4-feature-c2h"
                    className="font-normal"
                  >
                    Feature Request
                  </FieldLabel>
                </Field>
                <Field orientation="horizontal">
                  <RadioGroupItem
                    value="general"
                    id="feedback-8m4-general-9wc"
                  />
                  <FieldContent>
                    <FieldLabel
                      htmlFor="feedback-8m4-general-9wc"