|
- import { NextPage } from 'next';
- import * as Choice from '@tesseract-design/web-choice-react';
- import * as MultiChoice from '@tesseract-design/web-multichoice-react';
- import { DefaultLayout } from '@/components/DefaultLayout';
- import {ReactNode} from 'react';
-
- type Props = {
- options: ReactNode,
- }
-
- const OptionPage: NextPage<Props> = ({
- options = (
- <>
- <optgroup label="Fruits">
- <option value="mango">Mango</option>
- <option value="strawberry">Strawberry</option>
- <option value="avocado">Avocado</option>
- <option value="grapes">Grapes</option>
- </optgroup>
- <optgroup label="Non-fruits">
- <option value="chocolate">Chocolate</option>
- <option value="milk">Milk</option>
- <option value="coffee">Coffee</option>
- </optgroup>
- </>
- )
- }) => {
- return (
- <DefaultLayout
- title="Option"
- >
- <div className="mt-8 mb-16 md:mt-16 md:mb-32">
- <section>
- <div className="container mx-auto px-4">
- <h1>
- DropdownSelect
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.DropdownSelect
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- size="large"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- size="large"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- </div>
- <form>
- <fieldset
- disabled
- className="contents"
- >
- <legend className="sr-only">Disabled Test</legend>
- <div className="grid grid-cols-6 gap-4 my-4">
- <div className="col-span-2">
- <Choice.DropdownSelect
- label="First Name"
- block
- border
- />
- </div>
- <div className="col-span-2">
- <Choice.DropdownSelect
- label="Middle Name"
- block
- border
- />
- </div>
- <div className="col-span-2">
- <Choice.DropdownSelect
- label="Last Name"
- block
- border
- />
- </div>
- <div className="col-span-3">
- <Choice.DropdownSelect
- label="Username"
- block
- border
- />
- </div>
- <div className="col-span-3">
- <Choice.DropdownSelect
- label="Title"
- block
- border
- />
- </div>
- </div>
- </fieldset>
- </form>
- <form>
- <div>
- Hi, my name is
- {' '}
- <Choice.DropdownSelect
- border
- label="Name"
- size="small"
- />
- {' '}
- but you can call me
- {' '}
- <Choice.DropdownSelect
- border
- label="Nickname"
- size="small"
- />
- .
- </div>
- </form>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- variant="alternate"
- size="small"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- variant="alternate"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- size="large"
- label="Select"
- hint="Type anything here…"
- block
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- border
- block
- variant="alternate"
- size="large"
- label="Select"
- hint="Type anything here…"
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- <div>
- <Choice.DropdownSelect
- variant="alternate"
- border
- label="Select"
- hint="Type anything here…"
- block
- disabled
- >
- {options}
- </Choice.DropdownSelect>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- MenuSelect
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.MenuSelect
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.MenuSelect
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- <div>
- <Choice.MenuSelect
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.MenuSelect>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>
- Multiple
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <MultiChoice.MenuMultiSelect
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- <div>
- <MultiChoice.MenuMultiSelect
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </MultiChoice.MenuMultiSelect>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- RadioButton
- </h1>
- <div>
- <section>
- <h2>Variants</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.RadioButton
- block
- variant="bare"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="outline"
- block
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- disabled
- name="RadioButton"
- variant="bare"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- disabled
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="outline"
- block
- disabled
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- variant="filled"
- block
- disabled
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Sizes</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.RadioButton
- block
- variant="outline"
- size="small"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="filled"
- size="small"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="outline"
- size="medium"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="filled"
- size="medium"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="outline"
- size="large"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- variant="filled"
- size="large"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Compact</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <Choice.RadioButton
- block
- compact
- variant="outline"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="filled"
- name="RadioButton"
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="outline"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="filled"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="outline"
- size="small"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- <div>
- <Choice.RadioButton
- block
- compact
- variant="filled"
- size="small"
- name="RadioButton"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </Choice.RadioButton>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- RadioTickBox
- </h1>
- <div>
- <div className="grid gap-4 my-4">
- <div>
- <Choice.RadioTickBox
- block
- subtext="Subtext"
- name="RadioButton"
- >
- RadioButton
- </Choice.RadioTickBox>
- </div>
- </div>
- <div className="grid gap-4 my-4">
- <div>
- <Choice.RadioTickBox
- block
- subtext={
- <>
- <div>
- This is a very long text that may span a couple of lines.
- </div>
- <div>
- The subtext should not be included with the click area of the component.
- </div>
- </>
- }
- name="RadioButton"
- >
- RadioButton
- </Choice.RadioTickBox>
- </div>
- </div>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ToggleButton
- </h1>
- <div>
- <section>
- <h2>Variants</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleButton
- variant="bare"
- indeterminate
- ref={(el) => { console.log(el); }}
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="outline"
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="bare"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="outline"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- disabled
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="outline"
- block
- indeterminate
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- variant="filled"
- block
- indeterminate
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Sizes</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleButton
- block
- variant="outline"
- size="small"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="filled"
- size="small"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="outline"
- size="medium"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="filled"
- size="medium"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="outline"
- size="large"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- variant="filled"
- size="large"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Compact</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="outline"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="filled"
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="outline"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="filled"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="outline"
- size="small"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- <div>
- <MultiChoice.ToggleButton
- block
- compact
- variant="filled"
- size="small"
- subtext={
- <>
- Subtext
- </>
- }
- >
- Button
- </MultiChoice.ToggleButton>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ToggleSwitch
- </h1>
- <div>
- <section>
- <h2>Default</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- checkedLabel="Checkbox"
- />
- </div>
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- checkedLabel="Checkbox"
- />
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>With Unchecked Label</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- checkedLabel="On"
- uncheckedLabel="Off"
- />
- </div>
- <div>
- <MultiChoice.ToggleSwitch
- block
- subtext="Subtext"
- indeterminate
- checkedLabel="On"
- uncheckedLabel="Off"
- />
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ToggleTickBox
- </h1>
- <div>
- <section>
- <h2>Default</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4 my-4">
- <div>
- <MultiChoice.ToggleTickBox
- block
- subtext="Subtext"
- >
- Checkbox
- </MultiChoice.ToggleTickBox>
- </div>
- <div>
- <MultiChoice.ToggleTickBox
- block
- indeterminate
- subtext="Subtext"
- >
- Checkbox
- </MultiChoice.ToggleTickBox>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- ComboBox
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.ComboBox
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <Choice.ComboBox
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- <div>
- <Choice.ComboBox
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- >
- {options}
- </Choice.ComboBox>
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- <section>
- <div className="container mx-auto px-4">
- <h1>
- TagInput
- </h1>
- <div>
- <section>
- <h2>
- Default
- </h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <MultiChoice.TagInput
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- size="large"
- label="not enhanced"
- hint="Type anything here…"
- indicator="A"
- block
- onFocus={(e) => {
- console.log('focus', e.currentTarget);
- }}
- onBlur={(e) => {
- console.log('blur', e.currentTarget);
- }}
- onChange={(e) => {
- console.log('change', e.currentTarget.value);
- }}
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- size="large"
- label="change"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- separator={['newline', 'comma']}
- onFocus={(e) => {
- console.log('focus', e.currentTarget);
- }}
- onBlur={(e) => {
- console.log('blur', e.currentTarget);
- }}
- onChange={(e) => {
- console.log('change', e.currentTarget.value);
- }}
- />
- </div>
- <div>
- <MultiChoice.TagInput
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- </div>
- </div>
- </section>
- <section>
- <h2>Alternate</h2>
- <div>
- <div className="grid md:grid-cols-2 gap-4">
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- variant="alternate"
- size="small"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- border
- block
- variant="alternate"
- size="large"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- <div>
- <MultiChoice.TagInput
- variant="alternate"
- border
- label="MultilineTextInput"
- hint="Type anything here…"
- indicator="A"
- block
- disabled
- enhanced
- />
- </div>
- </div>
- </div>
- </section>
- </div>
- </div>
- </section>
- </div>
- </DefaultLayout>
- );
- };
-
- export default OptionPage;
|