import type { Meta, StoryObj } from '@storybook/react-webpack5'; import { useState } from 'react'; import { Input } from './inputs/Input'; import { SelectInput, SelectInputOptionContent } from './inputs/SelectInput'; import DateInput from './dateInput'; import PhoneNumberInput from './phoneNumberInput'; import { Field } from './field/Field'; import Checkbox from './checkbox'; import Body from './body'; export default { title: 'Forms/Disabled/Tests/Disabled Forms', parameters: { layout: 'centered', }, tags: ['!manifest'], } satisfies Meta; type Story = StoryObj; export const Disabled: Story = { render: () => , tags: ['!autodocs'], }; function DisabledFormShowcaseComponent() { const [selectValue, setSelectValue] = useState('United Kingdom'); const [dateValue, setDateValue] = useState('11/09/1990'); const [checkboxValue, setCheckboxValue] = useState(false); const countryOptions = [{ value: 'United Kingdom', label: 'United Kingdom' }]; return (

{/* Country of residence */}

({ type: 'option' as const, value: option.value, }))} renderValue={(value) => } onChange={setSelectValue} />

{/* Personal details section */} Personal details {/* Full legal first and middle name(s) */}

{/* Full legal last name(s) */}

{/* Preferred name (optional) */}

{/* Date of birth */}

{/* Dynamic flow input */}

{/* Phone number */}

{}} />

{/* Additional components */}

Additional Components {/* Naked Inputs (without Field wrapper) */}

Naked Inputs (without Field wrapper)

{/* Checkbox */}

setCheckboxValue(checked)} />

); }