Text Field

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21use herogpui::prelude::{FieldVariant, Surface, TextField};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![Surface::new()
        .padding(px(24.))
        .gap(px(16.))
        .child(
            TextField::new(self.demo_text("tf-surface", "", cx))
                .label("Full name")
                .placeholder("John")
                .variant(FieldVariant::Secondary)
                .description("Use the secondary variant on a surface"),
        )
        .into_any_element()])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19use herogpui::prelude::TextField;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![TextField::new(self.demo_text(
        "tf-dis",
        "Ada Lovelace",
        cx,
    ))
    .label("Full name")
    .placeholder("Auto-generated")
    .is_disabled(true)
    .into_any_element()])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29use herogpui::prelude::TextField;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![
        TextField::new(self.demo_text("tf-validate", "", cx,))
            .label("Full name")
            .placeholder("jane_doe")
            .is_required(true)
            .validate(|value| value
                .trim()
                .is_empty()
                .then(|| "Name is required".into()))
            .into_any_element(),
        TextField::new(self.demo_text("tf-invalid", "", cx))
    .label("Full name")
    .placeholder("Ada Lovelace")
    // `isInvalid` marks it invalid from the outside, which is
    // what a server-side error looks like.
    .is_invalid(true)
    .error_message("Name is required")
    .into_any_element()
    ])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29use herogpui::prelude::{ActiveTheme, TextField};
use herogpui::gpui::prelude::*;
use herogpui::gpui::{App, px};
use herogpui::gpui;

let tf_controlled = self
    .demo_text("tf-controlled", "", cx)
    .read(cx)
    .value()
    .to_owned();

gpui::div()
    .flex()
    .flex_col()
    .items_start()
    .justify_center()
    .gap(px(12.))
    .children(vec![
        gpui::div()
            .w(px(256.))
            .flex()
            .flex_col()
            .child(TextField::new(self.demo_text("tf-controlled", "", cx))
                        .label("Full name")
                        .placeholder("Jane")
                        .on_change(|_, _, _| {}))
            .into_any_element(),
        para(&format!("Value: {tf_controlled}"), cx),
    ])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38use herogpui::prelude::TextField;
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

let tf_render_props = self.demo_text("tf-render-props", "Ada", cx);

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![{
        let field = tf_render_props.clone();
        TextField::new(tf_render_props)
            .content(move |state| {
                TextField::new(field.clone())
                    .label(format!(
                        "{} · {} · {}",
                        if state.is_required {
                            "required"
                        } else {
                            "optional"
                        },
                        if state.is_invalid { "invalid" } else { "valid" },
                        if state.is_focus_within {
                            "focused"
                        } else {
                            "unfocused"
                        },
                    ))
                    .placeholder("Enter your email")
                    .is_required(true)
                    .into_any_element()
            })
            .is_required(true)
            .into_any_element()
    }])

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22use herogpui::prelude::{InputType, TextField};
use herogpui::gpui::prelude::*;
use herogpui::gpui::px;
use herogpui::gpui;

gpui::div()
    .flex()
    .flex_col()
    .w(px(256.))
    .gap(px(12.))
    .children(vec![
        TextField::new(self.demo_text("tf-pw", "", cx))
            .label("Password")
            .placeholder("••••••••")
            .input_type(InputType::Password)
            .into_any_element(),
        TextField::new(self.demo_text("tf-email", "", cx))
            .label("Email")
            .placeholder("user@example.com")
            .input_type(InputType::Email)
            .into_any_element(),
    ])