Skip to main content

Dropdown

This is the <Dropdown /> component

Examples​

Trigger
Item 1Item 2Item 3Item 4

<Dropdown trigger={<Text color="$white">Trigger</Text>} width={305}>
  <DropdownMenuItem href="#1">Item 1</DropdownMenuItem>
  <DropdownMenuItem href="#2">Item 2</DropdownMenuItem>
  <DropdownMenuItem href="#3">Item 3</DropdownMenuItem>
  <DropdownMenuItem href="#4">Item 4</DropdownMenuItem>
</Dropdown>

Basic Usage​

import Checkbox from '@candy/kitkat/checkbox'

export const MyComponent = () => {
  return <Checkbox value="value" />
}

Props​

  • color: string
    • A theme token can be passed here
    • This will control the color of the check and label text
    • The error text remains the default error color
  • error: boolean
    • If this prop is set to true or is present in the component call, the error text will appear (if the errorText prop is present)
  • errorText: string
    • If the error prop is present or true, this will appear as error text below the label
  • label: string | ReactNode
    • The label for the checkbox can be plain text or a ReactNode
  • ...input props
    • Default props for <input type="checkbox" /> can also be passed as props and will propagate to the input field in the component
    • ie checked={true}