Dropdown

const accountOptions = [
  {
    data: {
      name: "28 Degrees Platinum Mastercard",
      description: "Shop with less obstacles.",
    },
    value: "28-degrees-platinum-mastercard",
  },
  {
    data: {
      name: "Latitude Mastercard",
      description:
        "Choose what you want, when you want it.",
    },
    value: "latitude-mastercard",
  },
  {
    data: {
      name: "Gem Visa",
      description: "6 months interest free shopping.",
    },
    value: "gem-visa",
  },
  {
    data: {
      name: "GO Mastercard",
      description:
        "Flexible repayment options to suit your budget.",
    },
    value: "go-mastercard",
  },
]

function accountOptionToString({ data }) {
  return data.name
}

function AccountOption({ data }) {
  const { name, description } = data

  return (
    <Grid cols="100px 1fr" colsGap="5">
      <Grid.Item colSpan="0" rowSpan="0-1">
        <Placeholder
          label="Image"
          width="100%"
          height="100%"
        />
      </Grid.Item>
      <Grid.Item colSpan="1" rowSpan="0">
        <Text>
          <strong>{name}</strong>
        </Text>
      </Grid.Item>
      <Grid.Item colSpan="1" rowSpan="1">
        <Text textStyle="body2" color="grey.t75">
          {description}
        </Text>
      </Grid.Item>
    </Grid>
  )
}

const initialValues = {
  account: "",
}

function App() {
  return (
    <Form initialValues={initialValues}>
      <Dropdown
        name="account"
        label="Account"
        options={accountOptions}
        optionToString={accountOptionToString}
        optionComponent={AccountOption}
      />
    </Form>
  )
}

render(<App />)