I have this form:
import React, {Fragment} from 'react';
import Button from '@atlaskit/button/standard-button';
import {Checkbox} from '@atlaskit/checkbox';
import Form, {CheckboxField, ErrorMessage, Field, Fieldset, FormFooter} from '@atlaskit/form';
import {ValueType as Value} from "@atlaskit/select/types";
import Select from "@atlaskit/select";
const colors = [
{label: 'Blue', value: 'blue'},
{label: 'Red', value: 'red'},
{label: 'Purple', value: 'purple'},
{label: 'Black', value: 'black'},
{label: 'White', value: 'white'},
{label: 'Gray', value: 'gray'},
{label: 'Yellow', value: 'yellow'},
];
interface Option {
label: string;
value: string;
}
export default function BasicConfiguration() {
return (
<div>
<Form onSubmit={(data) => console.log(data)}>
{({formProps}) => (
<form {...formProps}>
<div style={{
display: 'flex',
flexDirection: 'column',
flexBasis: '100%',
flex: '1'
}}>
<CheckboxField name="vulnerabilities" value="critical">
{({fieldProps}) => <Checkbox {...fieldProps} label="Critical"/>}
</CheckboxField>
<Field<Value<Option>>
name="critical"
label="Critical"
isRequired={true}
>
{({fieldProps: {id, ...rest}, error}) => (
<Fragment>
<Select
inputId={id}
{...rest}
options={colors}
/>
</Fragment>
)}
</Field>
</div>
<CheckboxField name="vulnerabilities" value="high">
{({fieldProps}) => (
<Checkbox {...fieldProps} label="High"/>
)}
</CheckboxField>
<CheckboxField name="vulnerabilities" value="medium">
{({fieldProps}) => (
<Checkbox {...fieldProps} label="Medium"/>
)}
</CheckboxField>
<CheckboxField name="vulnerabilities" value="low">
{({fieldProps}) => (
<Checkbox {...fieldProps} label="Low"/>
)}
</CheckboxField>
<CheckboxField name="vulnerabilities" value="note">
{({fieldProps}) => (
<Checkbox {...fieldProps} label="note"/>
)}
</CheckboxField>
<Field<Value<Option>>
name="high"
label="High"
isRequired={true}
>
{({fieldProps: {id, ...rest}, error}) => (
<Fragment>
<Select
inputId={id}
{...rest}
options={colors}
/>
</Fragment>
)}
</Field>
<Field<Value<Option>>
name="medium"
label="Medium"
isRequired={true}
>
{({fieldProps: {id, ...rest}, error}) => (
<Fragment>
<Select
inputId={id}
{...rest}
options={colors}
/>
</Fragment>
)}
</Field>
<Field<Value<Option>>
name="low"
label="Low"
isRequired={true}
>
{({fieldProps: {id, ...rest}, error}) => (
<Fragment>
<Select
inputId={id}
{...rest}
options={colors}
/>
</Fragment>
)}
</Field>
<Field<Value<Option>>
name="note"
label="Note"
isRequired={true}
>
{({fieldProps: {id, ...rest}, error}) => (
<Fragment>
<Select
inputId={id}
{...rest}
options={colors}
/>
</Fragment>
)}
</Field>
<FormFooter>
<Button type="submit" appearance="primary">
Submit
</Button>
</FormFooter>
</form>
)}
</Form>
</div>
);
}
Is possible to style that first checkbox is in one line with first select, send second checkbooks is in one line with second select and etc…?