Select

Usage

select.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@uj-vilag/dap-components";

export default function SelectExample() {
  return (
    <Select>
      <SelectTrigger className="w-80">
        <SelectValue placeholder="Select a fruit" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="apple">Apple</SelectItem>
        <SelectItem value="banana">Banana</SelectItem>
        <SelectItem value="blueberry">Blueberry</SelectItem>
        <SelectItem value="grapes">Grapes</SelectItem>
        <SelectItem value="pineapple">Pineapple</SelectItem>
      </SelectContent>
    </Select>
  );
}

Props

This component is built on top of Radix UI's Select component. See the documentation for more details.

Prop

Type

Examples

Sizes

select-sizes.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@uj-vilag/dap-components";

export default function SelectSizesExample() {
  return (
    <div className="flex flex-col gap-8">
      <Select size="large">
        <SelectTrigger className="w-80">
          <SelectValue placeholder="Large select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
      <Select size="small">
        <SelectTrigger className="w-80">
          <SelectValue placeholder="Small select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
      <Select size="xSmall">
        <SelectTrigger className="w-80">
          <SelectValue placeholder="XSmall select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Status

select-status.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@uj-vilag/dap-components";

export default function SelectStatusExample() {
  return (
    <div className="flex flex-col gap-8">
      <Select status="error">
        <SelectTrigger className="w-80">
          <SelectValue placeholder="Error select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
      <Select status="success">
        <SelectTrigger className="w-80">
          <SelectValue placeholder="Success select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Disabled & Readonly

select-disabled-readonly.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@uj-vilag/dap-components";

export default function SelectDisabledReadonlyExample() {
  return (
    <div className="flex flex-col gap-8">
      <Select disabled>
        <SelectTrigger className="w-80">
          <SelectValue placeholder="Disabled select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
      <Select readOnly>
        <SelectTrigger className="w-80">
          <SelectValue placeholder="Readonly select" />
        </SelectTrigger>
        <SelectContent>
          <SelectItem value="option1">Option 1</SelectItem>
          <SelectItem value="option2">Option 2</SelectItem>
        </SelectContent>
      </Select>
    </div>
  );
}

Hide Checkmark

select-hide-checkmark.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@uj-vilag/dap-components";

export default function SelectHideCheckmarkExample() {
  return (
    <Select hideCheck>
      <SelectTrigger className="w-80">
        <SelectValue placeholder="No checkmark select" />
      </SelectTrigger>
      <SelectContent>
        <SelectItem value="option1">Option 1</SelectItem>
        <SelectItem value="option2">Option 2</SelectItem>
      </SelectContent>
    </Select>
  );
}

With Label & Feedback

Country

Please select your country.

Please select a valid country.

Priority

Choose the priority level for this task.

Priority level selected successfully!

select-with-label-feedback.tsx

import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
  Label,
  Feedback,
} from "@uj-vilag/dap-components";

export default function SelectWithLabelFeedbackExample() {
  return (
    <div className="flex flex-col gap-8">
      <Label
        labelText="Country"
        requirement="required"
        helperText="Please select your country."
        className="w-auto"
        mode="paragraph"
      >
        <Select status="error">
          <SelectTrigger className="w-80">
            <SelectValue placeholder="Select a country" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="usa">United States</SelectItem>
            <SelectItem value="uk">United Kingdom</SelectItem>
            <SelectItem value="canada">Canada</SelectItem>
            <SelectItem value="germany">Germany</SelectItem>
          </SelectContent>
        </Select>
        <Feedback message="Please select a valid country." />
      </Label>
      <Label
        labelText="Priority"
        requirement="required"
        helperText="Choose the priority level for this task."
        className="w-auto"
        mode="paragraph"
      >
        <Select status="success">
          <SelectTrigger className="w-80">
            <SelectValue placeholder="Select priority" />
          </SelectTrigger>
          <SelectContent>
            <SelectItem value="low">Low</SelectItem>
            <SelectItem value="medium">Medium</SelectItem>
            <SelectItem value="high">High</SelectItem>
            <SelectItem value="urgent">Urgent</SelectItem>
          </SelectContent>
        </Select>
        <Feedback
          message="Priority level selected successfully!"
          variant="positive"
        />
      </Label>
    </div>
  );
}

Select

On this page