Form Values: {JSON.stringify(form1, null, '\t')}

Shipping Information

Name Billing Address State Country Select Country {#each Object.keys(countries) as key} {countries[key]} {/each}

Billing Information

Card Type Type Visa American Express Discover Card Number CVC Expiration

Receipt

Send Receipt To: Saved Contacts

Jenny Hess

Elliot Fu

Stevie Feliciano

Christian

Matt

Justen Kitsune Do not include a receipt in the package

Form Values: {JSON.stringify(form2, null, '\t')}

Text

</Field>
            <Field>
                <Label input>Short Text</Label>
                <Textarea rows="2"/>
            </Field>
        </Form>

</Example>

<Example title = "Checkbox" code = {Code.checkbox}>

<Form ui>
            <Field inline>
                <Checkbox ui label="Checkbox"/>
            </Field>
            <Field inline>
                <Checkbox ui slider label="Slider"/>
            </Field>
            <Field inline>
                <Checkbox ui toggle label="Toggle"/>
            </Field>
        </Form>

</Example>

<Example title = "Radio checkbox" code = {Code.radio_checkbox}>

<Form ui>
            <Fields inline>
                <Field> <Radio ui value="1" bind:group={radio_ex1} label="Apples"/> </Field>
                <Field> <Radio ui value="2" bind:group={radio_ex1} label="Oranges"/> </Field>
                <Field> <Radio ui value="3" bind:group={radio_ex1} label="Pears"/> </Field>
                <Field> <Radio ui value="4" bind:group={radio_ex1} label="Grapefruit"/> </Field>
            </Fields>
        </Form>

<Form ui>
            <Fields grouped>
                <Field> <Radio ui value="1" bind:group={radio_ex2} label="Apples"/> </Field>
                <Field> <Radio ui value="2" bind:group={radio_ex2} label="Oranges"/> </Field>
                <Field> <Radio ui value="3" bind:group={radio_ex2} label="Pears"/> </Field>
                <Field> <Radio ui value="4" bind:group={radio_ex2} label="Grapefruit"/> </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Dropdown" code = {Code.dropdown}>

<Form ui>
            <Field>
                <Label input>Gender</Label>
                <Dropdown ui selection>
                    <Icon dropdown/>
                    <Text default>Gender</Text>
                    <Menu>
                        <Item data-value="1">Male</Item>
                        <Item data-value="0">Female</Item>
                    </Menu>
                </Dropdown>
            </Field>
        </Form>

</Example>

<Example title = "Multiple select" code = {Code.multiple_select}>

<Form ui>
            <Field>
                <Select ui multiple dropdown>
                    <Label input>Country</Label>
                    {#each Object.keys(countries) as key}
                        <Option value={key}><Flag _={key}/>{countries[key]}</Option>
                    {/each}
                </Select>
            </Field>
        </Form>

</Example>

<Example title = "Html select" code = {Code.html_select}>

<Form ui>
            <Field>
                <Select>
                    <Option value="">Gender</Option>
                    <Option value="1">Male</Option>
                    <Option value="0">Female</Option>
                </Select>
            </Field>
        </Form>

</Example>

<Example title = "Calendar" code = {Code.calendar}>

<Form ui>
            <Field>
                <Label input>Date</Label>
                <Calendar ui settings={{type:"date"}}>
                    <Input ui icon left>
                        <Icon calendar/>
                        <Input text placeholder="Pick a date" name="date"/>
                    </Input>
                </Calendar>
            </Field>
        </Form>

</Example>

<Example title = "Message" code = {Code.message}>

<Form ui>
            <Message ui>
                <Header>We had some issues</Header>
                <List>
                    <Item>Please enter your first name</Item>
                    <Item>Please enter your last name</Item>
                </List>
            </Message>
        </Form>

</Example>

<Example title = "Loading" code = {Code.loading}>

<Form ui loading>
            <Field>
                <Label input>E-mail</Label>
                <Input email placeholder="joe@schmoe.com"/>
            </Field>
            <Button ui submit>Submit</Button>
        </Form>
        <Form ui blue double loading>
            <Field>
                <Label input>E-mail</Label>
                <Input email placeholder="joe@schmoe.com"/>
            </Field>
            <Button ui submit>Submit</Button>
        </Form>

</Example>

<Example title = "Success" code = {Code.success}>

<Form ui success>
            <Field>
                <Label input>E-mail</Label>
                <Input email placeholder="joe@schmoe.com"/>
            </Field>
            <Message ui success>
                <Header>Form Completed</Header>
                <p>You're all signed up for the newsletter.</p>
            </Message>
            <Button ui submit>Submit</Button>
        </Form>

</Example>

<Example title = "Error" code = {Code.error}>

<Form ui error>
            <Field>
                <Label input>E-mail</Label>
                <Input email placeholder="joe@schmoe.com"/>
            </Field>
            <Message ui error>
                <Header>Action Forbidden</Header>
                <p>You can only sign up for an account once with a given e-mail address.</p>
            </Message>
            <Button ui submit>Submit</Button>
        </Form>

</Example>

<Example title = "Warning" code = {Code.warning}>

<Form ui warning>
            <Field>
                <Label input>E-mail</Label>
                <Input email placeholder="joe@schmoe.com"/>
            </Field>
            <Message ui warning>
                <Header>Could you check something!</Header>
                <List>
                    <Item>That e-mail has been subscribed, but you have not yet clicked the verification link in your e-mail.</Item>
                </List>
            </Message>
            <Button ui submit>Submit</Button>
        </Form>

</Example>

<Example title = "Info" code = {Code.info}>

<Form ui info>
            <Field>
                <Label input>E-mail</Label>
                <Input email placeholder="joe@schmoe.com"/>
            </Field>
            <Message ui info>
                <Header>Requirements</Header>
                <List>
                    <Item>Password must contain at least 8 characters</Item>
                </List>
            </Message>
            <Button ui submit>Submit</Button>
        </Form>

</Example>

<Example title = "Field error" code = {Code.field_error}>

<Form ui>
            <Fields two>
                <Field error>
                    <Label input>First Name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Last Name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
            <Field error>
                <Label input>Gender</Label>
                <Dropdown ui selection>
                    <Text default>Select</Text>
                    <Icon dropdown/>
                    <Input hidden name="gender"/>
                    <Menu>
                        <Item data-value="male">Male</Item>
                        <Item class="item" data-value="female">Female</Item>
                    </Menu>
                </Dropdown>
            </Field>
            <Field inline error>
                <Checkbox ui label="I agree to the Terms and Conditions"/>
            </Field>
        </Form>

</Example>

<Example title = "Field warning" code = {Code.field_warning}>

<Form ui>
            <Fields two>
                <Field warning>
                    <Label input>First Name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Last Name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
            <Field warning>
                <Label input>Gender</Label>
                <Dropdown ui selection>
                    <Text default>Select</Text>
                    <Icon dropdown/>
                    <Input hidden name="gender"/>
                    <Menu>
                        <Item data-value="male">Male</Item>
                        <Item class="item" data-value="female">Female</Item>
                    </Menu>
                </Dropdown>
            </Field>
            <Field inline warning>
                <Checkbox ui label="I agree to the Terms and Conditions"/>
            </Field>
        </Form>

</Example>

<Example title = "Field success" code = {Code.field_success}>

<Form ui>
            <Fields two>
                <Field success>
                    <Label input>First Name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Last Name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
            <Field success>
                <Label input>Gender</Label>
                <Dropdown ui selection>
                    <Text default>Select</Text>
                    <Icon dropdown/>
                    <Input hidden name="gender"/>
                    <Menu>
                        <Item data-value="male">Male</Item>
                        <Item class="item" data-value="female">Female</Item>
                    </Menu>
                </Dropdown>
            </Field>
            <Field inline success>
                <Checkbox ui label="I agree to the Terms and Conditions"/>
            </Field>
        </Form>

</Example>

<Example title = "Field info" code = {Code.field_info}>

<Form ui>
            <Fields two>
                <Field info>
                    <Label input>First Name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Last Name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
            <Field info>
                <Label input>Gender</Label>
                <Dropdown ui selection>
                    <Text default>Select</Text>
                    <Icon dropdown/>
                    <Input hidden name="gender"/>
                    <Menu>
                        <Item data-value="male">Male</Item>
                        <Item class="item" data-value="female">Female</Item>
                    </Menu>
                </Dropdown>
            </Field>
            <Field inline info>
                <Checkbox ui label="I agree to the Terms and Conditions"/>
            </Field>
        </Form>

</Example>

<Example title = "Disabled field" code = {Code.disabled_field}>

<Form ui>
            <Fields two>
                <Field disabled>
                    <Label input>First Name</Label>
                    <Input text disabled placeholder="First name" tabindex="-1"/>
                </Field>
                <Field disabled>
                    <Label input>Last Name</Label>
                    <Input text disabled placeholder="Last name" tabindex="-1"/>
                </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Readonly field" code = {Code.readonly_field}>

<Form ui>
            <Fields two>
                <Field readonly>
                    <Label input>First Name</Label>
                    <Input text readonly placeholder="First name" tabindex="-1"/>
                </Field>
                <Field readonly>
                    <Label input>Last Name</Label>
                    <Input text readonly placeholder="Last name" tabindex="-1"/>
                </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Size" code = {Code.size}>

{#each ["mini", "tiny", "small", "large", "big", "huge", "massive"] as size}
            <Form ui _={size}>
                <Fields two>
                    <Field>
                        <Label input>First Name</Label>
                        <Input text placeholder="First name" tabindex="-1"/>
                    </Field>
                    <Field>
                        <Label input>Last Name</Label>
                        <Input text placeholder="Last name" tabindex="-1"/>
                    </Field>
                </Fields>
            </Form>
            <Button ui _={size} submit>Submit</Button>
            <br/><br/>
        {/each}

</Example>

<Example title = "Equal width" code = {Code.equal_width}>

<Form ui equal width>
            <Fields>
                <Field>
                    <Label input>Username</Label>
                    <Input text placeholder="Username"/>
                </Field>
                <Field>
                    <Label input>Password</Label>
                    <Input password/>
                </Field>
            </Fields>
            <Fields>
                <Field>
                    <Label input>First name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Middle name</Label>
                    <Input text placeholder="Middle Name"/>
                </Field>
                <Field>
                    <Label input>Last name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Inverted" code = {Code.inverted}>

<Segment ui inverted>
            <Form ui inverted>
                <Fields two>
                    <Field>
                        <Label input>First Name</Label>
                        <Input text placeholder="First name" tabindex="-1"/>
                    </Field>
                    <Field>
                        <Label input>Last Name</Label>
                        <Input text placeholder="Last name" tabindex="-1"/>
                    </Field>
                </Fields>
            </Form>
            <Button ui submit>Submit</Button>
        </Segment>

</Example>

<Example title = "Inline field" code = {Code.inline_field}>

<Form ui>
            <Field inline>
              <Label input>Last name</Label>
              <Input text placeholder="Full Name"/>
            </Field>
        </Form>

</Example>

<Example title = "Width" code = {Code.width}>

<Form ui>
            <Fields>
                <Field six wide>
                    <Label input>First name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field four wide>
                    <Label input>Middle</Label>
                    <Input text placeholder="Middle Name"/>
                </Field>
                <Field six wide>
                    <Label input>Last name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
            <Fields>
                <Field two wide>
                    <Input text placeholder="2 Wide"/>
                </Field>
                <Field twelve wide>
                    <Input text placeholder="12 Wide"/>
                </Field>
                <Field two wide>
                    <Input text placeholder="2 Wide"/>
                </Field>
            </Fields>
            <Fields>
                <Field eight wide>
                    <Input text placeholder="8 Wide"/>
                </Field>
                <Field six wide>
                    <Input text placeholder="6 Wide"/>
                </Field>
                <Field two wide>
                    <Input text placeholder="2 Wide"/>
                </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Required" code = {Code.required}>

<Form ui>
            <Field required>
                <Label input>Full name</Label>
                <Input text placeholder="Full Name"/>
            </Field>
            <Field inline required>
                <Checkbox ui required>
                    <Label checkbox>
                        I agree to the terms and conditions
                    </Label>
                </Checkbox>
            </Field>
        </Form>

</Example>

<Example title = "Transparent textarea" code = {Code.transparent_textarea}>

<Form ui>
            <Field>
                <Label input>Description</Label>
                <Textarea transparent placeholder="Transparent textarea" cols="30" rows="3"/>
            </Field>
        </Form>

</Example>

<Example title = "Evenly divided" code = {Code.evenly_divided}>

<Form ui>
            <Fields three>
                <Field>
                    <Label input>First name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Middle name</Label>
                    <Input text placeholder="Middle Name"/>
                </Field>
                <Field>
                    <Label input>Last name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Grouped fields" code = {Code.grouped_fields}>

<Form ui>
            <Fields grouped>
                <Field> <Radio ui value="1" bind:group={fruit} label="Apples"/> </Field>
                <Field> <Radio ui value="2" bind:group={fruit} label="Oranges"/> </Field>
                <Field> <Radio ui value="3" bind:group={fruit} label="Pears"/> </Field>
                <Field> <Radio ui value="4" bind:group={fruit} label="Grapefruit"/> </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Equal width fields" code = {Code.equal_width_fields}>

<Form ui>
            <Fields>
                <Field>
                    <Label input>Username</Label>
                    <Input text placeholder="Username"/>
                </Field>
                <Field>
                    <Label input>Password</Label>
                    <Input password/>
                </Field>
            </Fields>
            <Fields equal width>
                <Field>
                    <Label input>First name</Label>
                    <Input text placeholder="First Name"/>
                </Field>
                <Field>
                    <Label input>Middle name</Label>
                    <Input text placeholder="Middle Name"/>
                </Field>
                <Field>
                    <Label input>Last name</Label>
                    <Input text placeholder="Last Name"/>
                </Field>
            </Fields>
        </Form>

</Example>

<Example title = "Inline fields" code = {Code.inline_fields}>

<Form ui>
            <Fields inline>
                <Label input>Phone Number</Label>
                <Field>
                    <Input text placeholder="(xxx)"/>
                </Field>
                <Field>
                    <Input text placeholder="xxx"/>
                </Field>
                <Field>
                    <Input text placeholder="xxxx"/>
                </Field>
            </Fields>
        </Form>

<Form ui>
            <Fields inline>
                <Label input>What's your favorite fruit?</Label>
                <Field> <Radio ui value="1" bind:group={fruit2} label="Apples"/> </Field>
                <Field> <Radio ui value="2" bind:group={fruit2} label="Oranges"/> </Field>
                <Field> <Radio ui value="3" bind:group={fruit2} label="Pears"/> </Field>
                <Field> <Radio ui value="4" bind:group={fruit2} label="Grapefruit"/> </Field>
            </Fields>
        </Form>

</Example>

</Examples>